'use client';

import React, { memo } from 'react';
import { NodeResizeControl } from '@xyflow/react';
import { cn } from '@/utils';

interface NodeFrameProps {
  children: React.ReactNode;
  selected?: boolean;
  dragging?: boolean;
  isResizing: boolean;
  isHovered: boolean;
  width: number;
  height: number;
  minHeight: number;
  shouldKeepRatio: boolean;
  ringColor: string;
  shadowColor: string;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
  onResizeStart: () => void;
  onResizeEnd: () => void;
  onResize: (width: number) => void;
  toolbar?: React.ReactNode;
  handles?: React.ReactNode;
  controlPanel?: React.ReactNode;
}

export const NodeFrame = memo(({
  children,
  selected,
  dragging,
  isResizing,
  isHovered,
  width,
  height,
  minHeight,
  shouldKeepRatio,
  ringColor,
  shadowColor,
  onMouseEnter,
  onMouseLeave,
  onResizeStart,
  onResizeEnd,
  onResize,
  toolbar,
  handles,
  controlPanel
}: NodeFrameProps) => {
  const isInteracting = dragging || isResizing;

  return (
    <div 
      className={cn(
        "relative rounded-[24px] group", 
        selected ? `ring-1 ${ringColor} ${shadowColor} z-30` : "ring-1 ring-white/10 hover:ring-white/20 z-10"
      )}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={{ 
        width, 
        height,
        background: selected ? 'rgba(28, 28, 28, 0.85)' : 'rgba(28, 28, 28, 0.6)',
        transition: isInteracting ? 'none' : 'all 0.5s cubic-bezier(0.32, 0.72, 0, 1)',
        backdropFilter: isInteracting ? 'none' : 'blur(24px)',
        boxShadow: isInteracting ? 'none' : undefined,
        willChange: isInteracting ? 'width, height' : 'auto'
      }}
    >
      {/* Extended hover area for better accessibility */}
      <div className="absolute -inset-8 z-[-1]" />

      {toolbar}
      {handles}
      {controlPanel}

      <div className="w-full h-full flex flex-col relative rounded-[24px] overflow-hidden bg-card">
        <div className="flex-1 min-h-0 relative bg-card">
          {children}
        </div>
      </div>

      <NodeResizeControl 
        minWidth={200} 
        minHeight={minHeight} 
        keepAspectRatio={shouldKeepRatio}
        onResizeStart={onResizeStart}
        onResizeEnd={onResizeEnd}
        onResize={(_, params) => onResize(params.width)}
        className="bg-transparent border-none"
        style={{ 
          opacity: (isHovered || isResizing) ? 1 : 0, 
          transition: 'opacity 0.2s',
          pointerEvents: (isHovered || isResizing) ? 'auto' : 'none'
        }}
      >
        <div className="absolute -bottom-3 -right-3 w-6 h-6 flex items-center justify-center cursor-nwse-resize text-muted-foreground hover:text-foreground transition-colors z-50">
          <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" className="opacity-70">
            <path d="M8 8H0V6H2V4H4V2H6V0H8V8Z" />
          </svg>
        </div>
      </NodeResizeControl>
    </div>
  );
});

NodeFrame.displayName = 'NodeFrame';
