/**
 * DedupDialog — UI for finding and merging duplicate contacts (Task 5.23).
 */

import React, { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { useFindDuplicates, useMergeContacts, type DuplicatePair } from '@/api/dedup';
import { useToast } from '@/components/ui/Toast';
import { GitMerge, Search, AlertTriangle, Check } from 'lucide-react';

export function DedupDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
  const { t } = useTranslation();
  const { success, error: showError } = useToast();
  const findDuplicates = useFindDuplicates();
  const mergeContacts = useMergeContacts();

  const [duplicates, setDuplicates] = useState<DuplicatePair[]>([]);
  const [selectedPair, setSelectedPair] = useState<number | null>(null);
  const [fieldOverrides, setFieldOverrides] = useState<Record<string, string>>({});

  const handleSearch = useCallback(async () => {
    try {
      const result = await findDuplicates.mutateAsync({ threshold: 0.7, limit: 50 });
      setDuplicates(result || []);
      setSelectedPair(null);
    } catch {
      showError(t('dedup.searchFailed'));
    }
  }, [findDuplicates, showError, t]);

  const handleMerge = useCallback(async () => {
    if (selectedPair === null) return;
    const pair = duplicates[selectedPair];
    if (!pair) return;

    try {
      const overrides: Record<string, unknown> = {};
      for (const [field, value] of Object.entries(fieldOverrides)) {
        if (value === 'source') {
          overrides[field] = (pair.source_contact as unknown as Record<string, unknown>)[field];
        } else if (value === 'target') {
          overrides[field] = (pair.target_contact as unknown as Record<string, unknown>)[field];
        }
      }

      await mergeContacts.mutateAsync({
        source_contact_id: pair.source_contact.id,
        target_contact_id: pair.target_contact.id,
        field_overrides: Object.keys(overrides).length > 0 ? overrides : undefined,
      });

      success(t('dedup.mergeSuccess'));
      setDuplicates((prev) => prev.filter((_, i) => i !== selectedPair));
      setSelectedPair(null);
      setFieldOverrides({});
    } catch {
      showError(t('dedup.mergeFailed'));
    }
  }, [duplicates, selectedPair, fieldOverrides, mergeContacts, success, showError, t]);

  const compareFields = [
    { key: 'displayname', label: t('dedup.fields.displayName') },
    { key: 'email_1', label: t('dedup.fields.email') },
    { key: 'phone_1', label: t('dedup.fields.phone') },
    { key: 'mailing_city', label: t('dedup.fields.city') },
    { key: 'mailing_postalcode', label: t('dedup.fields.postalCode') },
  ];

  return (
    <Modal open={open} onClose={onClose} title={t('dedup.title')} size="xl">
      <div className="space-y-4" data-testid="dedup-dialog">
        <div className="flex items-center gap-3">
          <Button
            variant="primary"
            icon={<Search className="w-4 h-4" />}
            onClick={handleSearch}
            isLoading={findDuplicates.isPending}
            data-testid="dedup-search-btn"
          >
            {t('dedup.findDuplicates')}
          </Button>
          {duplicates.length > 0 && (
            <Badge variant="info">{duplicates.length} {t('dedup.pairsFound')}</Badge>
          )}
        </div>

        {duplicates.length === 0 && !findDuplicates.isPending && (
          <p className="text-sm text-secondary-500" data-testid="dedup-empty">
            {t('dedup.noDuplicates')}
          </p>
        )}

        {duplicates.map((pair, idx) => (
          <div
            key={`${pair.source_contact.id}-${pair.target_contact.id}`}
            className={`border rounded-lg p-4 cursor-pointer transition-colors ${
              selectedPair === idx ? 'border-primary-500 bg-primary-50' : 'border-secondary-200'
            }`}
            onClick={() => setSelectedPair(idx)}
            data-testid={`dedup-pair-${idx}`}
          >
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <AlertTriangle className="w-4 h-4 text-warning-500" />
                <span className="font-medium">
                  {t('dedup.similarity')}: {Math.round(pair.similarity_score * 100)}%
                </span>
              </div>
              <div className="flex gap-1">
                {pair.match_reasons.map((reason) => (
                  <Badge key={reason} variant="warning">{reason}</Badge>
                ))}
              </div>
            </div>

            {selectedPair === idx && (
              <div className="mt-4 space-y-3">
                <div className="grid grid-cols-3 gap-2 text-sm font-medium text-secondary-600">
                  <div>{t('dedup.field')}</div>
                  <div className="text-center">{t('dedup.source')}</div>
                  <div className="text-center">{t('dedup.target')}</div>
                </div>
                {compareFields.map((field) => {
                  const sourceVal = (pair.source_contact as unknown as Record<string, unknown>)[field.key] as string | null;
                  const targetVal = (pair.target_contact as unknown as Record<string, unknown>)[field.key] as string | null;
                  return (
                    <div key={field.key} className="grid grid-cols-3 gap-2 text-sm">
                      <div className="text-secondary-700">{field.label}</div>
                      <div className="text-center">
                        <button
                          className={`px-2 py-1 rounded ${
                            fieldOverrides[field.key] === 'source' ? 'bg-primary-100 text-primary-700' : 'hover:bg-secondary-100'
                          }`}
                          onClick={(e) => {
                            e.stopPropagation();
                            setFieldOverrides((prev) => ({ ...prev, [field.key]: 'source' }));
                          }}
                          data-testid={`dedup-field-${field.key}-source`}
                        >
                          {sourceVal || '—'}
                        </button>
                      </div>
                      <div className="text-center">
                        <button
                          className={`px-2 py-1 rounded ${
                            fieldOverrides[field.key] === 'target' ? 'bg-primary-100 text-primary-700' : 'hover:bg-secondary-100'
                          }`}
                          onClick={(e) => {
                            e.stopPropagation();
                            setFieldOverrides((prev) => ({ ...prev, [field.key]: 'target' }));
                          }}
                          data-testid={`dedup-field-${field.key}-target`}
                        >
                          {targetVal || '—'}
                        </button>
                      </div>
                    </div>
                  );
                })}

                <div className="flex justify-end gap-2 pt-2">
                  <Button
                    variant="primary"
                    icon={<GitMerge className="w-4 h-4" />}
                    onClick={handleMerge}
                    isLoading={mergeContacts.isPending}
                    data-testid="dedup-merge-btn"
                  >
                    {t('dedup.merge')}
                  </Button>
                </div>
              </div>
            )}

            {selectedPair !== idx && (
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="font-medium text-secondary-800">{pair.source_contact.displayname}</div>
                  <div className="text-secondary-500">{pair.source_contact.email_1 || '—'}</div>
                </div>
                <div>
                  <div className="font-medium text-secondary-800">{pair.target_contact.displayname}</div>
                  <div className="text-secondary-500">{pair.target_contact.email_1 || '—'}</div>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </Modal>
  );
}
