"use client";

import { useState, useEffect } from "react";
import { X, AlertTriangle } from "lucide-react";
import type { ToolEntry } from "@/lib/types";

interface DeleteConfirmModalProps {
  open: boolean;
  onClose: () => void;
  entityName: string;
  affectedTools: ToolEntry[];
  alternatives: { id: string; name: string }[];
  onCascade: () => void;
  onReassign: (newTypeId: string) => void;
}

export function DeleteConfirmModal({
  open,
  onClose,
  entityName,
  affectedTools,
  alternatives,
  onCascade,
  onReassign,
}: DeleteConfirmModalProps) {
  const [reassignId, setReassignId] = useState(alternatives[0]?.id ?? "");

  useEffect(() => {
    if (open) {
      setReassignId(alternatives[0]?.id ?? "");
    }
  }, [open, alternatives]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-zinc-900">
        {/* Header */}
        <div className="mb-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <AlertTriangle size={20} className="text-amber-500" />
            <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
              Delete Type
            </h3>
          </div>
          <button
            onClick={onClose}
            className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
          >
            <X size={20} />
          </button>
        </div>

        {/* Warning message */}
        <p className="mb-3 text-sm text-zinc-600 dark:text-zinc-400">
          <strong className="text-zinc-900 dark:text-zinc-100">{entityName}</strong> has{" "}
          {affectedTools.length} tool{affectedTools.length !== 1 ? "s" : ""} associated with it:
        </p>

        {/* Affected tools list */}
        <ul className="mb-4 max-h-32 overflow-y-auto rounded-lg border border-zinc-200 p-2 dark:border-zinc-700">
          {affectedTools.map((tool) => (
            <li
              key={tool.id}
              className="rounded px-2 py-1 text-sm text-zinc-700 dark:text-zinc-300"
            >
              {tool.name}
            </li>
          ))}
        </ul>

        {/* Reassign section */}
        {alternatives.length > 0 && (
          <div className="mb-4 space-y-2 rounded-lg border border-zinc-200 p-3 dark:border-zinc-700">
            <label className="block text-xs font-medium text-zinc-500">
              Reassign tools to another type:
            </label>
            <div className="flex gap-2">
              <select
                value={reassignId}
                onChange={(e) => setReassignId(e.target.value)}
                className="flex-1 rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
              >
                {alternatives.map((alt) => (
                  <option key={alt.id} value={alt.id}>
                    {alt.name}
                  </option>
                ))}
              </select>
              <button
                onClick={() => onReassign(reassignId)}
                disabled={!reassignId}
                className="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
              >
                Reassign
              </button>
            </div>
          </div>
        )}

        {/* Footer */}
        <div className="flex justify-end gap-2">
          <button
            onClick={onClose}
            className="rounded-lg px-4 py-2 text-sm text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
          >
            Cancel
          </button>
          <button
            onClick={onCascade}
            className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
          >
            Delete All
          </button>
        </div>
      </div>
    </div>
  );
}
