import React from "react";
import { GripVertical, MoreVertical } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./dropdown-menu";

/**
 * A selectable scenario card used in the Borrowing Capacity left sidebar.
 *
 * Displays a scenario name and description. Supports selected state (right
 * border accent), an optional drag handle for reordering, and an optional
 * kebab menu with "Update Scenario" and "Delete Scenario" options.
 */

export interface ScenarioItemProps {
  /** Scenario display name (e.g. "Default Scenario") */
  name: string;
  /** Secondary descriptor (e.g. "Owner Occupier") */
  description?: string;
  /** Highlights the item with a left border accent */
  isSelected?: boolean;
  /** Shows the drag grip handle and marks the root as draggable */
  isDraggable?: boolean;
  /** Visual drag-over highlight (consumer-controlled) */
  isDragOver?: boolean;
  /** Click handler — typically selects this scenario */
  onSelect?: () => void;
  /** Called when "Update Scenario" is clicked in the kebab menu */
  onEdit?: () => void;
  /** Called when "Delete Scenario" is clicked in the kebab menu */
  onDelete?: () => void;
  /** HTML5 drag events forwarded from parent (ScenarioList) */
  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
  onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
  onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
  className?: string;
}

export function ScenarioItem({
  name,
  description,
  isSelected = false,
  isDraggable = false,
  isDragOver = false,
  onSelect,
  onEdit,
  onDelete,
  onDragStart,
  onDragOver,
  onDragLeave,
  onDrop,
  onDragEnd,
  className,
}: ScenarioItemProps) {
  return (
    <div
      role="button"
      tabIndex={0}
      draggable={isDraggable}
      onClick={onSelect}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") onSelect?.();
      }}
      onDragStart={onDragStart}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
      onDragEnd={onDragEnd}
      className={cn(
        "flex cursor-pointer items-center gap-2 border border-border bg-background px-3 py-3 transition-colors hover:bg-muted/50",
        isSelected && "border-r-2 border-r-primary bg-primary/5",
        isDragOver && "bg-primary/10",
        className,
      )}
    >
      {isDraggable && (
        <span
          aria-hidden
          className="shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing"
        >
          <GripVertical size={16} />
        </span>
      )}

      <div className="min-w-0 flex-1">
        <p className="truncate text-base font-semibold text-foreground">
          {name}
        </p>
        {description && (
          <p className="mt-0.5 truncate text-sm text-muted-foreground">
            {description}
          </p>
        )}
      </div>

      {(onEdit || onDelete) && (
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <button
                type="button"
                aria-label="Scenario options"
                onClick={(e) => e.stopPropagation()}
                className="shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
              >
                <MoreVertical size={16} />
              </button>
            }
          />
          <DropdownMenuContent align="end">
            {onEdit && (
              <DropdownMenuItem
                onClick={(e) => {
                  e.stopPropagation();
                  onEdit();
                }}
              >
                Update Scenario
              </DropdownMenuItem>
            )}
            {onDelete && (
              <DropdownMenuItem
                onClick={(e) => {
                  e.stopPropagation();
                  onDelete();
                }}
                className="text-destructive focus:text-destructive"
              >
                Delete Scenario
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      )}
    </div>
  );
}