"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import type { DuplicateTransaction, DuplicateAction } from "@/types/ocr";

interface DuplicateTransactionDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  duplicates: DuplicateTransaction[];
  onResolve: (choices: Record<number, DuplicateAction>) => void;
}

export function DuplicateTransactionDialog({
  open,
  onOpenChange,
  duplicates,
  onResolve,
}: DuplicateTransactionDialogProps) {
  const [bulkAction, setBulkAction] = useState<DuplicateAction>("skip");
  const [perTransactionActions, setPerTransactionActions] = useState<
    Record<number, DuplicateAction>
  >(() => {
    const initial: Record<number, DuplicateAction> = {};
    duplicates.forEach((dup) => {
      initial[dup.transaction_index] = "skip";
    });
    return initial;
  });

  const handleApply = () => {
    const finalChoices: Record<number, DuplicateAction> = {};
    duplicates.forEach((dup) => {
      finalChoices[dup.transaction_index] =
        perTransactionActions[dup.transaction_index] || bulkAction;
    });
    onResolve(finalChoices);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg bg-white text-gray-900">
        <DialogHeader>
          <DialogTitle className="text-amber-600">
            Duplicate Transactions Found
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-3 py-2">
          <div className="flex gap-4 p-2 bg-gray-50 rounded text-xs">
            <span className="font-medium text-gray-600">Bulk action:</span>
            <label className="flex items-center gap-1.5 cursor-pointer">
              <input
                type="radio"
                name="bulk-dup-action"
                checked={bulkAction === "skip"}
                onChange={() => setBulkAction("skip")}
              />
              Skip all
            </label>
            <label className="flex items-center gap-1.5 cursor-pointer">
              <input
                type="radio"
                name="bulk-dup-action"
                checked={bulkAction === "update"}
                onChange={() => setBulkAction("update")}
              />
              Update all
            </label>
          </div>

          <div className="max-h-64 overflow-y-auto space-y-2">
            {duplicates.map((dup) => (
              <div
                key={dup.transaction_index}
                className="border rounded-lg p-3 text-sm space-y-1"
              >
                <div className="font-medium text-gray-800">
                  Transaction {dup.transaction_index + 1}
                </div>
                <div className="text-xs text-gray-500">
                  ISIN: {dup.isin || "N/A"} | Name: {dup.name || "N/A"} |
                  Existing ID: {dup.existing_id}
                </div>
                <div className="flex gap-4 mt-1">
                  <label className="flex items-center gap-1.5 text-xs cursor-pointer">
                    <input
                      type="radio"
                      name={`dup-trans-${dup.transaction_index}`}
                      checked={
                        perTransactionActions[dup.transaction_index] === "skip"
                      }
                      onChange={() =>
                        setPerTransactionActions((prev) => ({
                          ...prev,
                          [dup.transaction_index]: "skip",
                        }))
                      }
                    />
                    Skip
                  </label>
                  <label className="flex items-center gap-1.5 text-xs cursor-pointer">
                    <input
                      type="radio"
                      name={`dup-trans-${dup.transaction_index}`}
                      checked={
                        perTransactionActions[dup.transaction_index] === "update"
                      }
                      onChange={() =>
                        setPerTransactionActions((prev) => ({
                          ...prev,
                          [dup.transaction_index]: "update",
                        }))
                      }
                    />
                    Update
                  </label>
                </div>
              </div>
            ))}
          </div>
        </div>

        <DialogFooter>
          <button
            type="button"
            onClick={() => onOpenChange(false)}
            className="px-4 py-2 text-sm border rounded-md hover:bg-gray-50"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleApply}
            className="px-4 py-2 text-sm bg-[#428B4D] text-white rounded-md hover:bg-[#357a3f]"
          >
            Apply Actions
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}