import { Dialog } from "./Dialog.tsx";
import { Button } from "./Button.tsx";

interface LexiconDependencyConfirmationDialogProps {
  open: boolean;
  mainLexiconNsid: string;
  dependencies: string[];
  onConfirm: () => void;
  onCancel: () => void;
}

export function LexiconDependencyConfirmationDialog({
  open,
  mainLexiconNsid,
  dependencies,
  onConfirm,
  onCancel,
}: LexiconDependencyConfirmationDialogProps) {
  const totalCount = 1 + dependencies.length;

  return (
    <Dialog
      open={open}
      onClose={onCancel}
      title="Add Lexicon with Dependencies"
      maxWidth="md"
    >
      <div className="space-y-4">
        <p className="text-sm text-zinc-400">
          This lexicon requires {dependencies.length} {dependencies.length === 1 ? "dependency" : "dependencies"}.
          All {totalCount} lexicons will be added to your slice.
        </p>

        <div className="space-y-3">
          <div>
            <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
              Selected Lexicon
            </h3>
            <div className="font-mono text-sm text-zinc-200">
              {mainLexiconNsid}
            </div>
          </div>

          {dependencies.length > 0 && (
            <div>
              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
                Dependencies ({dependencies.length})
              </h3>
              <div className="space-y-1">
                {dependencies.map((nsid) => (
                  <div
                    key={nsid}
                    className="font-mono text-sm text-zinc-400 pl-4"
                  >
                    {nsid}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="flex justify-end gap-3 pt-4">
          <Button type="button" variant="default" onClick={onCancel}>
            Cancel
          </Button>
          <Button type="button" variant="primary" onClick={onConfirm}>
            Add All ({totalCount})
          </Button>
        </div>
      </div>
    </Dialog>
  );
}