import type { ReactNode } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardAction } from '@hm-design/ui';
import { Button } from '@hm-design/ui';
import { ChevronDown, ChevronRight, X } from 'lucide-react';
import { useDraggablePanel } from '../hooks/useDraggablePanel';

export interface DraggablePanelProps {
  title: string;
  icon?: ReactNode;
  initial: { left: number; top: number };
  width?: number;
  height?: number;
  open: boolean;
  onClose: () => void;
  headerActions?: ReactNode;
  children: ReactNode;
}

export function DraggablePanel({
  title,
  icon,
  initial,
  width = 320,
  height = 420,
  open,
  onClose,
  headerActions,
  children,
}: DraggablePanelProps) {
  const { panelRef, style, collapsed, toggleCollapse, headerProps } = useDraggablePanel(initial);

  if (!open) return null;

  return (
    <Card
      ref={panelRef}
      size="sm"
      className="fixed shadow-lg overflow-hidden"
      style={{
        ...style,
        width,
        height: collapsed ? 'auto' : height,
        minWidth: 250,
        minHeight: collapsed ? 'auto' : 140,
        maxWidth: '90vw',
        maxHeight: '90vh',
        resize: collapsed ? 'none' : 'both',
      }}
    >
      <CardHeader className="select-none border-b py-2" {...headerProps}>
        <CardTitle className="flex items-center gap-2 text-sm">
          {icon}
          {title}
        </CardTitle>
        <CardAction className="flex items-center gap-1">
          {headerActions}
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            aria-label={collapsed ? '펼치기' : '접기'}
            title={collapsed ? '펼치기' : '접기'}
            onClick={toggleCollapse}
          >
            {collapsed ? <ChevronRight /> : <ChevronDown />}
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            aria-label="닫기"
            title="닫기"
            onClick={onClose}
          >
            <X />
          </Button>
        </CardAction>
      </CardHeader>
      {!collapsed && (
        <CardContent className="overflow-auto" style={{ height: 'calc(100% - 44px)' }}>
          {children}
        </CardContent>
      )}
    </Card>
  );
}