import { useQuery } from '@tanstack/react-query';
import { X, RefreshCw, User } from 'lucide-react';
import { customerApi, stressfreiEmailApi } from '../../services/api';
import type { Address } from '../../types';
import { CopyableValue } from '../ui/CopyButton';
import Button from '../ui/Button';

interface CustomerInfoModalProps {
  customerId: number;
  open: boolean;
  onClose: () => void;
  // Optional: Kontext des geöffneten Vertrags. Wenn gesetzt, werden die
  // Liefer-/Rechnungsadresse dieses Vertrags und seine Stressfrei-Adresse
  // gesondert angezeigt.
  deliveryAddress?: Address | null;
  billingAddress?: Address | null;
  contractStressfreiEmailId?: number | null;
}

function formatAddress(a?: Address | null): string {
  if (!a) return '';
  return `${a.street} ${a.houseNumber ?? ''}, ${a.postalCode} ${a.city}`.trim();
}

/**
 * Schnellansicht der wichtigsten Kundendaten – wird aus der
 * Vertragsdetail-Seite per Info-Icon neben dem Kundennamen geöffnet.
 * Jedes Feld hat einen Copy-Button rechts. Modal-only, schreibt nichts.
 */
export default function CustomerInfoModal({
  customerId,
  open,
  onClose,
  deliveryAddress,
  billingAddress,
  contractStressfreiEmailId,
}: CustomerInfoModalProps) {
  const { data, isLoading } = useQuery({
    queryKey: ['customer-info-modal', customerId],
    queryFn: () => customerApi.getById(customerId),
    enabled: open,
    staleTime: 30_000,
  });

  // Stressfrei-Wechseln-Adressen des Kunden (nur aktive).
  const { data: stressfreiData } = useQuery({
    queryKey: ['customer-info-modal-stressfrei', customerId],
    queryFn: () => stressfreiEmailApi.getByCustomer(customerId),
    enabled: open,
    staleTime: 30_000,
  });

  if (!open) return null;

  const c = data?.data;

  const fullName = c
    ? [c.salutation, c.firstName, c.lastName].filter(Boolean).join(' ')
    : '';

  const primaryAddress = c?.addresses?.find((a) => a.isDefault) || c?.addresses?.[0];
  const addressString = primaryAddress ? formatAddress(primaryAddress) : '';

  const deliveryStr = formatAddress(deliveryAddress);
  // Rechnungsadresse nur zeigen, wenn sie tatsächlich abweicht.
  const billingStr =
    billingAddress && billingAddress.id !== deliveryAddress?.id ? formatAddress(billingAddress) : '';

  const stressfreiList = stressfreiData?.data ?? [];
  const contractStressfrei = contractStressfreiEmailId
    ? stressfreiList.find((s) => s.id === contractStressfreiEmailId)
    : undefined;
  const otherStressfrei = stressfreiList.filter((s) => s.id !== contractStressfreiEmailId);

  const hasContractContext = !!(deliveryStr || billingStr || contractStressfrei || otherStressfrei.length);

  const formatDate = (iso?: string) => {
    if (!iso) return '';
    try {
      return new Date(iso).toLocaleDateString('de-DE', {
        day: '2-digit', month: '2-digit', year: 'numeric',
      });
    } catch {
      return iso;
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[85vh] flex flex-col">
        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
            <User className="w-5 h-5 text-blue-600" />
            Kundendaten
            {c && (
              <span className="text-sm font-normal text-gray-500">
                · {c.customerNumber}
              </span>
            )}
          </h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-700 p-1"
            aria-label="Schließen"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="px-5 py-4 overflow-auto flex-1">
          {isLoading && (
            <div className="text-gray-500 text-sm flex items-center gap-2 py-6">
              <RefreshCw className="w-4 h-4 animate-spin" />
              Lade Kundendaten…
            </div>
          )}
          {c && (
            <dl className="space-y-3">
              {c.type === 'BUSINESS' && c.companyName && (
                <CopyableValue label="Firma" value={c.companyName} />
              )}
              {fullName && <CopyableValue label="Name" value={fullName} />}
              {c.birthDate && (
                <CopyableValue label="Geburtsdatum" value={formatDate(c.birthDate)} />
              )}
              {c.birthPlace && <CopyableValue label="Geburtsort" value={c.birthPlace} />}
              {c.foundingDate && (
                <CopyableValue label="Gründungsdatum" value={formatDate(c.foundingDate)} />
              )}
              {addressString && (
                <CopyableValue label="Adresse" value={addressString} />
              )}
              {c.phone && <CopyableValue label="Telefon" value={c.phone} />}
              {c.mobile && <CopyableValue label="Mobil" value={c.mobile} />}
              {c.email && <CopyableValue label="E-Mail" value={c.email} />}
              {c.portalEmail && c.portalEmail !== c.email && (
                <CopyableValue label="Portal-E-Mail" value={c.portalEmail} />
              )}
              {c.taxNumber && (
                <CopyableValue label="Steuernummer" value={c.taxNumber} />
              )}
              {c.commercialRegisterNumber && (
                <CopyableValue
                  label="Handelsregisternummer"
                  value={c.commercialRegisterNumber}
                />
              )}

              {/* Vertragsbezogene Zusatzinfos */}
              {hasContractContext && (
                <div className="pt-3 mt-3 border-t border-gray-200 space-y-3">
                  {deliveryStr && (
                    <CopyableValue label="Lieferadresse (Vertrag)" value={deliveryStr} />
                  )}
                  {billingStr && (
                    <CopyableValue label="Rechnungsadresse (Vertrag)" value={billingStr} />
                  )}
                  {contractStressfrei && (
                    <CopyableValue
                      label="Stressfrei-Adresse (Vertrag)"
                      value={contractStressfrei.email}
                    />
                  )}
                  {otherStressfrei.length > 0 && (
                    <div>
                      <dt className="text-sm text-gray-500 mb-1">Weitere Stressfrei-Adressen</dt>
                      <dd className="space-y-1">
                        {otherStressfrei.map((s) => (
                          <CopyableValue key={s.id} value={s.email} />
                        ))}
                      </dd>
                    </div>
                  )}
                </div>
              )}
            </dl>
          )}
        </div>

        <div className="px-5 py-3 border-t border-gray-200 flex justify-end">
          <Button variant="secondary" onClick={onClose}>
            Schließen
          </Button>
        </div>
      </div>
    </div>
  );
}
