frontend/src/components/ImportResultModal.tsx

import { X, Edit3, CheckCircle2, AlertTriangle } from "lucide-react";

export type ImportResult = {
  addedCount: number;
  skipped: Array<string | { name: string; reason?: string }>;
};

export default function ImportResultModal(props: {
  result: ImportResult;
  onClose: () => void;
  onEdit: (name: string) => void;
}) {
  const { result, onClose, onEdit } = props;

  const skipped = (result.skipped || []).map((s) =>
    typeof s === "string" ? { name: s } : s
  );

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-[560px] max-w-[92vw] bg-white rounded-2xl border shadow p-5 space-y-3">
        <div className="flex items-center justify-between">
          <div className="text-lg font-semibold">Import Summary</div>
          <button className="p-1 rounded hover:bg-gray-100" onClick={onClose}>
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="flex items-center gap-2 text-sm">
          <CheckCircle2 className="h-5 w-5 text-green-600" />
          <span><b>{result.addedCount}</b> new product(s) added.</span>
        </div>

        {skipped.length > 0 && (
          <div className="mt-2">
            <div className="flex items-center gap-2 text-sm mb-2">
              <AlertTriangle className="h-5 w-5 text-amber-600" />
              <span><b>{skipped.length}</b> duplicate(s) skipped — click **Edit** to modify.</span>
            </div>
            <div className="max-h-56 overflow-auto border rounded-lg">
              <table className="w-full text-sm">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="text-left p-2">Name</th>
                    <th className="text-left p-2">Reason</th>
                    <th className="text-left p-2">Action</th>
                  </tr>
                </thead>
                <tbody>
                  {skipped.map((d, i) => (
                    <tr key={i} className="border-t">
                      <td className="p-2">{d.name}</td>
                      <td className="p-2 text-gray-600">{d.reason || "Duplicate name"}</td>
                      <td className="p-2">
                        <button
                          className="inline-flex items-center gap-1 border rounded px-2 py-1"
                          onClick={() => onEdit(d.name)}
                        >
                          <Edit3 className="h-4 w-4" /> Edit
                        </button>
                      </td>
                    </tr>
                  ))}
                  {skipped.length === 0 && (
                    <tr><td className="p-3 text-center text-gray-500" colSpan={3}>No duplicates.</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div className="pt-2 flex justify-end">
          <button className="border rounded px-3 py-2" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  );
}