opencrm/frontend/src/components/email/AssignToContractModal.tsx

import { useState } from 'react';
import { Search, FileText } from 'lucide-react';
import Modal from '../ui/Modal';
import Button from '../ui/Button';
import { contractApi, cachedEmailApi, CachedEmail } from '../../services/api';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

interface AssignToContractModalProps {
  isOpen: boolean;
  onClose: () => void;
  email: CachedEmail;
  customerId: number;
  onSuccess?: () => void;
}

export default function AssignToContractModal({
  isOpen,
  onClose,
  email,
  customerId,
  onSuccess,
}: AssignToContractModalProps) {
  const [search, setSearch] = useState('');
  const [selectedContractId, setSelectedContractId] = useState<number | null>(null);
  const queryClient = useQueryClient();

  // Verträge des Kunden laden
  const { data: contractsData, isLoading } = useQuery({
    queryKey: ['contracts', 'customer', customerId],
    queryFn: () => contractApi.getAll({ customerId }),
    enabled: isOpen,
  });

  const contracts = contractsData?.data || [];

  // Gefilterte Verträge
  const filteredContracts = contracts.filter((contract) => {
    if (!search) return true;
    const searchLower = search.toLowerCase();
    return (
      contract.contractNumber.toLowerCase().includes(searchLower) ||
      contract.contractCategory?.name?.toLowerCase().includes(searchLower) ||
      contract.provider?.name?.toLowerCase().includes(searchLower)
    );
  });

  const assignMutation = useMutation({
    mutationFn: (contractId: number) =>
      cachedEmailApi.assignToContract(email.id, contractId),
    onSuccess: (_data, contractId) => {
      queryClient.invalidateQueries({ queryKey: ['emails'] });
      queryClient.invalidateQueries({ queryKey: ['email', email.id] });
      // Contract folder counts aktualisieren
      queryClient.invalidateQueries({ queryKey: ['contract-folder-counts', contractId] });
      onSuccess?.();
      handleClose();
    },
  });

  const handleClose = () => {
    setSearch('');
    setSelectedContractId(null);
    onClose();
  };

  const handleAssign = () => {
    if (selectedContractId) {
      assignMutation.mutate(selectedContractId);
    }
  };

  const formatDate = (dateStr?: string) => {
    if (!dateStr) return '-';
    return new Date(dateStr).toLocaleDateString('de-DE');
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      title="E-Mail Vertrag zuordnen"
      size="lg"
    >
      <div className="space-y-4">
        {/* Email Info */}
        <div className="p-3 bg-gray-50 rounded-lg">
          <p className="text-sm text-gray-600">
            <span className="font-medium">Betreff:</span>{' '}
            {email.subject || '(Kein Betreff)'}
          </p>
          <p className="text-sm text-gray-600">
            <span className="font-medium">Von:</span> {email.fromAddress}
          </p>
        </div>

        {/* Search */}
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Vertrag suchen..."
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>

        {/* Contract List */}
        <div className="border border-gray-200 rounded-lg max-h-80 overflow-auto">
          {isLoading ? (
            <div className="flex items-center justify-center py-8">
              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
            </div>
          ) : filteredContracts.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-8 text-gray-500">
              <FileText className="w-8 h-8 mb-2 opacity-50" />
              <p className="text-sm">Keine Verträge gefunden</p>
            </div>
          ) : (
            <div className="divide-y divide-gray-200">
              {filteredContracts.map((contract) => (
                <div
                  key={contract.id}
                  onClick={() => setSelectedContractId(contract.id)}
                  className={`
                    flex items-center gap-3 p-3 cursor-pointer transition-colors
                    ${selectedContractId === contract.id ? 'bg-blue-50 border-l-2 border-l-blue-500' : 'hover:bg-gray-50'}
                  `}
                >
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="font-medium text-gray-900">
                        {contract.contractNumber}
                      </span>
                      <span className={`
                        px-2 py-0.5 text-xs rounded-full
                        ${contract.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
                          contract.status === 'PENDING' ? 'bg-yellow-100 text-yellow-800' :
                          contract.status === 'CANCELLED' ? 'bg-red-100 text-red-800' :
                          'bg-gray-100 text-gray-800'}
                      `}>
                        {contract.status}
                      </span>
                    </div>
                    <div className="text-sm text-gray-600 truncate">
                      {contract.contractCategory?.name}
                      {contract.provider && ` - ${contract.provider.name}`}
                    </div>
                    <div className="text-xs text-gray-500">
                      Start: {formatDate(contract.startDate)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="flex justify-end gap-3 pt-4">
          <Button variant="secondary" onClick={handleClose}>
            Abbrechen
          </Button>
          <Button
            onClick={handleAssign}
            disabled={!selectedContractId || assignMutation.isPending}
          >
            {assignMutation.isPending ? 'Wird zugeordnet...' : 'Zuordnen'}
          </Button>
        </div>
      </div>
    </Modal>
  );
}