// CAMINHO: frontend/src/components/CreateConnectionModal.tsx

import React, { useState, useEffect } from 'react';
import apiClient from '../services/api';
import './CreateConnectionModal.css';

interface Contact { id: string; name: string; }
interface ConnectionType { id: number; nome: string; }

// A prop `contacts` foi removida, o modal agora busca seus próprios dados.
interface CreateConnectionModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConnect: (sourceContactId: string, targetContactId: string, typeId: number, notes: string) => void;
  sourceContact: Contact | null;
}

const CreateConnectionModal: React.FC<CreateConnectionModalProps> = ({ 
    isOpen, 
    onClose, 
    onConnect, 
    sourceContact 
}) => {
  // Estados para gerenciar a lista de contatos interna do modal
  const [allContacts, setAllContacts] = useState<Contact[]>([]);
  const [loadingContacts, setLoadingContacts] = useState(false);

  const [targetContactId, setTargetContactId] = useState<string>('');
  const [notes, setNotes] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [connectionTypes, setConnectionTypes] = useState<ConnectionType[]>([]);
  const [selectedTypeId, setSelectedTypeId] = useState<string>('');
  const [loadingTypes, setLoadingTypes] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    // Função para buscar todos os dados necessários quando o modal abre
    const fetchDataForModal = async () => {
      setLoadingContacts(true);
      setLoadingTypes(true);
      setError(null);
      try {
        // Busca a lista completa de contatos e os tipos de conexão em paralelo
        const [contactsRes, typesRes] = await Promise.all([
            apiClient.get<Contact[]>('/contacts/', { params: { limit: 5000 } }), // Pega todos os contatos
            apiClient.get<ConnectionType[]>('/tipos-conexao/')
        ]);
        
        setAllContacts(contactsRes.data);
        setConnectionTypes(typesRes.data);

        if (typesRes.data.length > 0) {
          setSelectedTypeId(String(typesRes.data[0].id));
        }
      } catch (err) {
        console.error("Erro ao buscar dados para o modal:", err);
        setError("Não foi possível carregar os dados necessários.");
      } finally {
        setLoadingContacts(false);
        setLoadingTypes(false);
      }
    };

    if (isOpen) {
      fetchDataForModal();
      // Reseta os estados do formulário ao abrir
      setTargetContactId('');
      setNotes('');
      setError(null);
      setSearchTerm('');
    }
  }, [isOpen]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!sourceContact || !targetContactId || !selectedTypeId) {
      setError('Por favor, preencha todos os campos obrigatórios.');
      return;
    }
    // Chama a função passada pelo pai com todos os dados coletados
    onConnect(sourceContact.id, targetContactId, parseInt(selectedTypeId), notes);
  };

  // Filtra a lista interna do modal com base na busca interna
  const filteredTargets = allContacts.filter(c => 
    c.id !== sourceContact?.id &&
    c.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>Criar Conexão</h3>
        </div>
        
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="search-input">Conectar <strong>{sourceContact?.name}</strong> com:</label>
            <input
              id="search-input"
              type="text"
              placeholder="Pesquisar contato..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="form-control search-input"
              disabled={loadingContacts}
            />
            <select 
                value={targetContactId} 
                onChange={(e) => setTargetContactId(e.target.value)} 
                required 
                className="form-control"
                disabled={loadingContacts}
            >
              <option value="" disabled>{loadingContacts ? "Carregando contatos..." : "Selecione um contato"}</option>
              {filteredTargets.map(contact => (<option key={contact.id} value={contact.id}>{contact.name}</option>))}
            </select>
          </div>

          <div className="form-group">
            <label htmlFor="connection-type">Tipo de Conexão:</label>
            <select 
                id="connection-type"
                value={selectedTypeId} 
                onChange={(e) => setSelectedTypeId(e.target.value)} 
                required 
                className="form-control"
                disabled={loadingTypes}
            >
              {loadingTypes ? <option>Carregando...</option> : 
                connectionTypes.length === 0 ? (<option value="" disabled>Nenhum tipo cadastrado</option>) : 
                (connectionTypes.map(type => (<option key={type.id} value={type.id}>{type.nome}</option>)))
              }
            </select>
          </div>

          <div className="form-group">
            <label htmlFor="notes">Notas (Opcional):</label>
            <textarea 
                id="notes"
                value={notes} 
                onChange={(e) => setNotes(e.target.value)} 
                className="form-control"
                placeholder="Ex: Colega de trabalho na empresa X..."
            />
          </div>

          {error && <p style={{ color: '#d93025', textAlign: 'center' }}>{error}</p>}

          <div className="modal-actions">
            <button type="button" onClick={onClose} className="btn btn-secondary">
              Cancelar
            </button>
            <button type="submit" className="btn btn-primary">
              Salvar Conexão
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateConnectionModal;