tfm_ainventory/frontend/components/ItemComparisonModal.tsx

'use client';

import { AlertTriangle, X, RefreshCw, SkipForward } from 'lucide-react';

interface ItemComparisonModalProps {
  show: boolean;
  existingItem: any;
  newItem: any;
  onUpdate: () => Promise<void>;
  onSkip: () => void;
  loading?: boolean;
}

export default function ItemComparisonModal({
  show,
  existingItem,
  newItem,
  onUpdate,
  onSkip,
  loading = false
}: ItemComparisonModalProps) {
  if (!show) return null;

  const fields = [
    { key: 'name', label: 'Name' },
    { key: 'type', label: 'Type' },
    { key: 'description', label: 'Description' },
    { key: 'category', label: 'Category' },
    { key: 'connector', label: 'Connector' },
    { key: 'size', label: 'Size' },
    { key: 'color', label: 'Color' },
    { key: 'part_number', label: 'Part Number' },
    { key: 'ocr_text', label: 'OCR Key' },
  ];

  const isDifferent = (key: string) => {
    const existing = String(existingItem?.[key] || '').trim();
    const newVal = String(newItem?.[key] || '').trim();
    return existing !== newVal && newVal !== '';
  };

  const hasChanges = fields.some(f => isDifferent(f.key));

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-background/80">
      <div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
        <div className="flex items-center gap-3 mb-6">
          <AlertTriangle size={24} className="text-amber-500" />
          <div>
            <h3 className="text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-white">Part Number Already Exists</h3>
            <p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-secondary mt-1">Compare the versions below</p>
          </div>
        </div>

        {/* Comparison Table */}
        <div className="space-y-3 mb-8">
          <div className="grid grid-cols-3 gap-4 mb-4 pb-4 border-b border-slate-800">
            <div className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold text-muted">Field</div>
            <div className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold text-secondary">Current (ID: {existingItem?.id})</div>
            <div className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold text-primary">New (Import)</div>
          </div>

          {fields.map(field => {
            const existing = String(existingItem?.[field.key] || '').trim() || '—';
            const newVal = String(newItem?.[field.key] || '').trim() || '—';
            const different = isDifferent(field.key);

            return (
              <div
                key={field.key}
                className={`grid grid-cols-3 gap-4 p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 rounded-lg ${
                  different ? 'bg-amber-500/10 border border-amber-500/20' : 'bg-slate-800/30'
                }`}
              >
                <div className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-secondary">{field.label}</div>
                <div className={`text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}>
                  {existing}
                </div>
                <div className={`text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-mono ${different ? 'text-primary font-bold' : 'text-secondary'}`}>
                  {newVal}
                </div>
              </div>
            );
          })}
        </div>

        {!hasChanges && (
          <div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-slate-800/50 rounded-xl mb-6 border border-slate-700">
            <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-secondary">✓ Items are identical. No update needed.</p>
          </div>
        )}

        {/* Action Buttons */}
        <div className="flex gap-3">
          <button
            onClick={onSkip}
            disabled={loading}
            aria-label="Skip this item comparison"
            className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-secondary rounded-2xl text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
          >
            <SkipForward size={16} /> Skip
          </button>
          {hasChanges && (
            <button
              onClick={onUpdate}
              disabled={loading}
              aria-label="Update item with new data"
              className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-primary/20 focus:ring-2 focus:ring-blue-400 focus:outline-none"
            >
              {loading ? (
                <>
                  <RefreshCw size={16} className="animate-spin" /> Updating...
                </>
              ) : (
                <>
                  <RefreshCw size={16} /> Update Item
                </>
              )}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}