/**
 * Widget wrapper with drag/resize handles and edit controls
 */

import type { ReactNode } from "react";
import { useState } from "react";
import { Card, CardHeader, CardContent } from "@mosaic/ui";
import { GripVertical, Maximize2, Minimize2, X, Settings } from "lucide-react";

export interface WidgetWrapperProps {
  id: string;
  title: string;
  children: ReactNode;
  isEditing?: boolean;
  isCollapsed?: boolean;
  onEdit?: () => void;
  onRemove?: () => void;
  onToggleCollapse?: () => void;
  className?: string;
}

export function WidgetWrapper({
  id,
  title,
  children,
  isEditing = false,
  isCollapsed = false,
  onEdit,
  onRemove,
  onToggleCollapse,
  className = "",
}: WidgetWrapperProps): React.JSX.Element {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Card
      id={id}
      className={`relative flex flex-col h-full ${isCollapsed ? "min-h-[60px]" : ""} ${className}`}
      onMouseEnter={() => {
        setIsHovered(true);
      }}
      onMouseLeave={() => {
        setIsHovered(false);
      }}
    >
      {/* Drag handle */}
      {isEditing && (
        <div className="absolute top-2 left-2 z-10 cursor-grab active:cursor-grabbing p-1 rounded hover:bg-gray-100 group">
          <GripVertical className="w-4 h-4 text-gray-400 group-hover:text-gray-600" />
        </div>
      )}

      {/* Header */}
      <CardHeader
        className={`px-4 py-3 border-b border-gray-200 flex items-center justify-between ${
          isEditing ? "pr-20" : ""
        }`}
      >
        <h3 className="text-sm font-semibold text-gray-900">{title}</h3>

        {/* Action buttons */}
        <div className="flex items-center gap-1">
          {!isEditing && (isHovered || isCollapsed) && (
            <>
              {onToggleCollapse && (
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    onToggleCollapse();
                  }}
                  className="p-1 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700"
                  title={isCollapsed ? "Expand" : "Collapse"}
                >
                  {isCollapsed ? (
                    <Maximize2 className="w-4 h-4" />
                  ) : (
                    <Minimize2 className="w-4 h-4" />
                  )}
                </button>
              )}
              {!isCollapsed && onEdit && (
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    onEdit();
                  }}
                  className="p-1 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700"
                  title="Settings"
                >
                  <Settings className="w-4 h-4" />
                </button>
              )}
            </>
          )}
          {isEditing && onRemove && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                onRemove();
              }}
              className="p-1 rounded hover:bg-red-100 text-gray-500 hover:text-red-600"
              title="Remove widget"
            >
              <X className="w-4 h-4" />
            </button>
          )}
        </div>
      </CardHeader>

      {/* Content */}
      {!isCollapsed && <CardContent className="flex-1 overflow-auto p-4">{children}</CardContent>}
    </Card>
  );
}
