// frontend/src/pages/ConnectionTypesPage.tsx
import React, { useEffect, useState } from 'react';
import apiClient from '../services/api';

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

const ConnectionTypesPage: React.FC = () => {
  const [types, setTypes] = useState<ConnectionType[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [newTypeName, setNewTypeName] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Lógica de fetch completa restaurada
  const fetchConnectionTypes = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get<ConnectionType[]>('/tipos-conexao/');
      setTypes(response.data);
      setError(null);
    } catch (err: any) {
      setError(err.response?.data?.detail || 'Falha ao buscar os tipos de conexão.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchConnectionTypes(); }, []);

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newTypeName.trim()) return;
    setIsSubmitting(true);
    try {
      await apiClient.post('/tipos-conexao/', { nome: newTypeName });
      setNewTypeName('');
      fetchConnectionTypes();
    } catch (err: any) {
      alert(err.response?.data?.detail || 'Falha ao criar o tipo.');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async (typeId: number, typeName: string) => {
    if (window.confirm(`Tem certeza que deseja deletar o tipo "${typeName}"?`)) {
      try {
        await apiClient.delete(`/tipos-conexao/${typeId}`);
        fetchConnectionTypes();
      } catch (err: any) {
        alert(err.response?.data?.detail || 'Falha ao deletar o tipo.');
      }
    }
  };
  
  if (loading) return <div><h1>Gerenciar Tipos de Conexão</h1><p>Carregando...</p></div>;
  if (error) return <div><h1>Gerenciar Tipos de Conexão</h1><p style={{ color: 'red' }}>Erro: {error}</p></div>;

  return (
    <div>
      <h1>Gerenciar Tipos de Conexão</h1>
      <form onSubmit={handleCreate} style={{ marginBottom: 24, padding: 16, border: '1px solid #ccc', borderRadius: 8 }}>
        <h3>Criar Novo Tipo</h3>
        <div style={{ display: 'flex', gap: 8 }}>
          <input type="text" value={newTypeName} onChange={(e) => setNewTypeName(e.target.value)} placeholder="Ex: Amigo, Família" style={{ flex: 1, padding: 8 }} disabled={isSubmitting} />
          <button type="submit" disabled={isSubmitting}>{isSubmitting ? 'Salvando...' : 'Adicionar'}</button>
        </div>
      </form>
      <h3>Tipos Existentes</h3>
      {types.length === 0 ? <p>Nenhum tipo de conexão cadastrado.</p> : (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {types.map(type => (
            <li key={type.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 12, borderBottom: '1px solid #eee' }}>
              <span>{type.nome}</span>
              <button onClick={() => handleDelete(type.id, type.nome)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'red' }} title="Deletar">🗑️</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ConnectionTypesPage;