import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
    getAuth, 
    onAuthStateChanged, 
    createUserWithEmailAndPassword, 
    signInWithEmailAndPassword, 
    signOut 
} from 'firebase/auth';
import { 
    getFirestore, 
    collection, 
    addDoc, 
    onSnapshot, 
    doc, 
    updateDoc, 
    deleteDoc, 
    query, 
    where,
    writeBatch,
    getDocs
} from 'firebase/firestore';
import { LogIn, UserPlus, Users, Car, FileText, DollarSign, LogOut, PlusCircle, Trash2, Edit, X, Search, Bell } from 'lucide-react';

// --- CONFIGURAÇÃO DO FIREBASE ---
// Configuração fornecida pelo usuário
const firebaseConfig = {
  apiKey: "AIzaSyB8vzF0ew4FD7ggTuo-OleoUan113JS5ho",
  authDomain: "despachante-86b79.firebaseapp.com",
  projectId: "despachante-86b79",
  storageBucket: "despachante-86b79.appspot.com",
  messagingSenderId: "1036072046779",
  appId: "1:1036072046779:web:421f0a33c342166793599e"
};

// --- INICIALIZAÇÃO DO FIREBASE ---
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// --- COMPONENTES DE UI ---

const Spinner = () => (
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
);

const Modal = ({ children, isOpen, onClose, title }) => {
    if (!isOpen) return null;
    return (
        <div className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4">
            <div className="bg-gray-800 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
                <header className="flex justify-between items-center p-4 border-b border-gray-700">
                    <h2 className="text-xl font-bold text-white">{title}</h2>
                    <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
                        <X size={24} />
                    </button>
                </header>
                <main className="p-6 overflow-y-auto">
                    {children}
                </main>
            </div>
        </div>
    );
};

const Input = React.forwardRef(({...props}, ref) => (
    <input ref={ref} {...props} className="w-full bg-gray-700 text-white px-4 py-2 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all" />
));

const Select = ({ children, ...props }) => (
    <select {...props} className="w-full bg-gray-700 text-white px-4 py-2 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none">
        {children}
    </select>
);

const Button = ({ children, onClick, className = '', type = 'button', isLoading = false, variant = 'primary' }) => {
    const baseClasses = 'px-4 py-2 rounded-lg font-semibold transition-all flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed';
    const variantClasses = {
        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800',
        secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500',
        danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500',
    };
    return (
        <button type={type} onClick={onClick} className={`${baseClasses} ${variantClasses[variant]} ${className}`} disabled={isLoading}>
            {isLoading ? <Spinner /> : children}
        </button>
    );
};

// --- TELA DE AUTENTICAÇÃO ---

const AuthScreen = ({ setUser }) => {
    const [isLogin, setIsLogin] = useState(true);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    const handleAuth = async (e) => {
        e.preventDefault();
        setIsLoading(true);
        setError('');
        try {
            if (isLogin) {
                await signInWithEmailAndPassword(auth, email, password);
            } else {
                await createUserWithEmailAndPassword(auth, email, password);
            }
            // O onAuthStateChanged vai cuidar de atualizar o estado do usuário
        } catch (err) {
            setError(err.message.includes("auth/invalid-credential") ? "Credenciais inválidas." : "Erro ao processar. Verifique os dados.");
            console.error(err);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="min-h-screen bg-gray-900 flex flex-col justify-center items-center p-4">
            <div className="w-full max-w-md bg-gray-800 p-8 rounded-2xl shadow-2xl border border-gray-700">
                <h1 className="text-3xl font-bold text-center text-white mb-2">DespachantePRO</h1>
                <p className="text-center text-gray-400 mb-8">{isLogin ? 'Acesse sua conta' : 'Crie uma nova conta'}</p>
                <form onSubmit={handleAuth}>
                    <div className="mb-4">
                        <Input type="email" placeholder="E-mail" value={email} onChange={(e) => setEmail(e.target.value)} required />
                    </div>
                    <div className="mb-6">
                        <Input type="password" placeholder="Senha" value={password} onChange={(e) => setPassword(e.target.value)} required />
                    </div>
                    {error && <p className="text-red-500 text-sm mb-4 text-center">{error}</p>}
                    <Button type="submit" className="w-full" isLoading={isLoading}>
                        {isLogin ? <><LogIn className="mr-2" size={18}/> Entrar</> : <><UserPlus className="mr-2" size={18}/> Registrar</>}
                    </Button>
                </form>
                <p className="text-center text-gray-400 mt-6">
                    {isLogin ? "Não tem uma conta? " : "Já tem uma conta? "}
                    <button onClick={() => setIsLogin(!isLogin)} className="text-blue-500 hover:underline font-semibold">
                        {isLogin ? 'Registre-se' : 'Faça login'}
                    </button>
                </p>
            </div>
        </div>
    );
};


// --- COMPONENTES PRINCIPAIS DA APLICAÇÃO ---

const ClientForm = ({ client, onSave, onCancel }) => {
    const [formData, setFormData] = useState({
        name: '', cpfCnpj: '', phone: '', email: '', address: ''
    });

    useEffect(() => {
        if (client) {
            setFormData(client);
        } else {
            setFormData({ name: '', cpfCnpj: '', phone: '', email: '', address: '' });
        }
    }, [client]);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSave(formData);
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <Input name="name" placeholder="Nome Completo / Razão Social" value={formData.name} onChange={handleChange} required />
            <Input name="cpfCnpj" placeholder="CPF / CNPJ" value={formData.cpfCnpj} onChange={handleChange} required />
            <Input name="phone" placeholder="Telefone" value={formData.phone} onChange={handleChange} />
            <Input name="email" placeholder="E-mail" type="email" value={formData.email} onChange={handleChange} />
            <Input name="address" placeholder="Endereço" value={formData.address} onChange={handleChange} />
            <div className="flex justify-end gap-4 pt-4">
                <Button onClick={onCancel} variant="secondary">Cancelar</Button>
                <Button type="submit" variant="primary">Salvar Cliente</Button>
            </div>
        </form>
    );
};

const VehicleForm = ({ vehicle, onSave, onCancel }) => {
    const [formData, setFormData] = useState({
        plate: '', renavam: '', model: '', year: '', color: ''
    });

    useEffect(() => {
        if (vehicle) {
            setFormData(vehicle);
        } else {
            setFormData({ plate: '', renavam: '', model: '', year: '', color: '' });
        }
    }, [vehicle]);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSave(formData);
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <Input name="plate" placeholder="Placa" value={formData.plate} onChange={handleChange} required />
            <Input name="renavam" placeholder="RENAVAM" value={formData.renavam} onChange={handleChange} required />
            <Input name="model" placeholder="Modelo" value={formData.model} onChange={handleChange} />
            <Input name="year" placeholder="Ano Fabricação/Modelo" value={formData.year} onChange={handleChange} />
            <Input name="color" placeholder="Cor" value={formData.color} onChange={handleChange} />
            <div className="flex justify-end gap-4 pt-4">
                <Button onClick={onCancel} variant="secondary">Cancelar</Button>
                <Button type="submit" variant="primary">Salvar Veículo</Button>
            </div>
        </form>
    );
};

const ServiceForm = ({ service, clients, onSave, onCancel }) => {
    const [formData, setFormData] = useState({
        clientId: '',
        vehicleId: '',
        serviceType: 'Transferência de Propriedade',
        status: 'Em andamento',
        openingDate: new Date().toISOString().split('T')[0],
        notes: '',
        totalValue: 0,
        paidValue: 0,
    });
    const [vehicles, setVehicles] = useState([]);

    useEffect(() => {
        if (service) {
            setFormData({
                ...service,
                totalValue: service.totalValue || 0,
                paidValue: service.paidValue || 0,
            });
            if (service.clientId) {
                // Carregar veículos para o cliente selecionado
                const vehicleCollection = collection(db, `users/${auth.currentUser.uid}/clients/${service.clientId}/vehicles`);
                onSnapshot(vehicleCollection, (snapshot) => {
                    const vehicleList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                    setVehicles(vehicleList);
                });
            }
        } else {
             setFormData({
                clientId: '',
                vehicleId: '',
                serviceType: 'Transferência de Propriedade',
                status: 'Em andamento',
                openingDate: new Date().toISOString().split('T')[0],
                notes: '',
                totalValue: 0,
                paidValue: 0,
            });
        }
    }, [service, clients]);

    const handleClientChange = (e) => {
        const clientId = e.target.value;
        setFormData(prev => ({ ...prev, clientId, vehicleId: '' }));
        if (clientId) {
            const vehicleCollection = collection(db, `users/${auth.currentUser.uid}/clients/${clientId}/vehicles`);
            onSnapshot(vehicleCollection, (snapshot) => {
                const vehicleList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                setVehicles(vehicleList);
            });
        } else {
            setVehicles([]);
        }
    };

    const handleChange = (e) => {
        const { name, value, type } = e.target;
        setFormData(prev => ({ ...prev, [name]: type === 'number' ? parseFloat(value) || 0 : value }));
    };


    const handleSubmit = (e) => {
        e.preventDefault();
        const client = clients.find(c => c.id === formData.clientId);
        const vehicle = vehicles.find(v => v.id === formData.vehicleId);
        onSave({
            ...formData,
            clientName: client ? client.name : 'N/A',
            vehiclePlate: vehicle ? vehicle.plate : 'N/A',
        });
    };

    const serviceTypes = ["Transferência de Propriedade", "Primeiro Emplacamento", "Licenciamento Anual", "2ª Via CRV/CRLV", "Comunicação de Venda", "Alteração de Características", "Outro"];
    const statusTypes = ["Em andamento", "Pendente de documentos", "Aguardando pagamento", "Protocolado no DETRAN", "Concluído", "Cancelado"];

    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <Select name="clientId" value={formData.clientId} onChange={handleClientChange} required>
                <option value="">Selecione um Cliente</option>
                {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </Select>
            <Select name="vehicleId" value={formData.vehicleId} onChange={handleChange} required disabled={!formData.clientId || vehicles.length === 0}>
                <option value="">{vehicles.length > 0 ? "Selecione um Veículo" : "Nenhum veículo cadastrado"}</option>
                {vehicles.map(v => <option key={v.id} value={v.id}>{v.plate} - {v.model}</option>)}
            </Select>
            <Select name="serviceType" value={formData.serviceType} onChange={handleChange}>
                {serviceTypes.map(type => <option key={type} value={type}>{type}</option>)}
            </Select>
            <Select name="status" value={formData.status} onChange={handleChange}>
                {statusTypes.map(st => <option key={st} value={st}>{st}</option>)}
            </Select>
            <Input name="openingDate" type="date" value={formData.openingDate} onChange={handleChange} />
            <textarea name="notes" placeholder="Observações..." value={formData.notes} onChange={handleChange} className="w-full bg-gray-700 text-white px-4 py-2 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all h-24"></textarea>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Input name="totalValue" type="number" placeholder="Valor Total (R$)" value={formData.totalValue} onChange={handleChange} step="0.01" />
                <Input name="paidValue" type="number" placeholder="Valor Pago (R$)" value={formData.paidValue} onChange={handleChange} step="0.01" />
            </div>
            <div className="flex justify-end gap-4 pt-4">
                <Button onClick={onCancel} variant="secondary">Cancelar</Button>
                <Button type="submit" variant="primary">Salvar Serviço</Button>
            </div>
        </form>
    );
};

// --- PÁGINAS DA APLICAÇÃO ---

const DashboardPage = ({ clients, services, setCurrentPage }) => {
    const stats = useMemo(() => {
        const active = services.filter(s => s.status !== 'Concluído' && s.status !== 'Cancelado').length;
        const pendingDocs = services.filter(s => s.status === 'Pendente de documentos').length;
        const concluded = services.filter(s => s.status === 'Concluído').length;
        const toReceive = services.reduce((acc, s) => acc + ((s.totalValue || 0) - (s.paidValue || 0)), 0);
        return { active, pendingDocs, concluded, toReceive };
    }, [services]);

    const recentServices = useMemo(() => {
        return [...services]
            .sort((a, b) => new Date(b.openingDate) - new Date(a.openingDate))
            .slice(0, 5);
    }, [services]);

    return (
        <div className="space-y-8">
            <h1 className="text-3xl font-bold text-white">Painel de Controle</h1>
            {/* Cards de Estatísticas */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">Serviços Ativos</h3>
                    <p className="text-3xl font-bold text-white mt-1">{stats.active}</p>
                </div>
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">Pendentes de Docs</h3>
                    <p className="text-3xl font-bold text-yellow-400 mt-1">{stats.pendingDocs}</p>
                </div>
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">Concluídos</h3>
                    <p className="text-3xl font-bold text-green-400 mt-1">{stats.concluded}</p>
                </div>
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">A Receber</h3>
                    <p className="text-3xl font-bold text-blue-400 mt-1">R$ {stats.toReceive.toFixed(2)}</p>
                </div>
            </div>

            {/* Ações Rápidas */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <button onClick={() => setCurrentPage('clients')} className="bg-blue-600/20 text-blue-300 p-4 rounded-lg flex items-center justify-center text-lg font-semibold hover:bg-blue-600/40 transition-all">
                    <Users className="mr-3" /> Gerenciar Clientes
                </button>
                <button onClick={() => setCurrentPage('services')} className="bg-green-600/20 text-green-300 p-4 rounded-lg flex items-center justify-center text-lg font-semibold hover:bg-green-600/40 transition-all">
                    <FileText className="mr-3" /> Gerenciar Serviços
                </button>
                 <button onClick={() => setCurrentPage('financial')} className="bg-yellow-600/20 text-yellow-300 p-4 rounded-lg flex items-center justify-center text-lg font-semibold hover:bg-yellow-600/40 transition-all">
                    <DollarSign className="mr-3" /> Ver Financeiro
                </button>
            </div>

            {/* Lista de Serviços Recentes */}
            <div>
                <h2 className="text-2xl font-bold text-white mb-4">Serviços Recentes</h2>
                <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
                    <div className="overflow-x-auto">
                        <table className="w-full text-left">
                            <thead className="bg-gray-700/50">
                                <tr>
                                    <th className="p-4 font-semibold text-gray-300">Cliente</th>
                                    <th className="p-4 font-semibold text-gray-300">Placa</th>
                                    <th className="p-4 font-semibold text-gray-300">Tipo</th>
                                    <th className="p-4 font-semibold text-gray-300">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {recentServices.length > 0 ? recentServices.map(service => (
                                    <tr key={service.id} className="border-b border-gray-700 last:border-b-0 hover:bg-gray-700/30 transition-colors">
                                        <td className="p-4 text-white">{service.clientName}</td>
                                        <td className="p-4 text-gray-300">{service.vehiclePlate}</td>
                                        <td className="p-4 text-gray-300">{service.serviceType}</td>
                                        <td className="p-4"><span className={`px-2 py-1 rounded-full text-xs font-semibold ${getStatusColor(service.status)}`}>{service.status}</span></td>
                                    </tr>
                                )) : (
                                    <tr><td colSpan="4" className="text-center p-8 text-gray-400">Nenhum serviço recente.</td></tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
};

const ClientsPage = ({ user, clients, services, onSaveClient, onDeleteClient, onSaveVehicle, onDeleteVehicle }) => {
    const [isClientModalOpen, setIsClientModalOpen] = useState(false);
    const [isVehicleModalOpen, setIsVehicleModalOpen] = useState(false);
    const [isViewModalOpen, setIsViewModalOpen] = useState(false);
    const [editingClient, setEditingClient] = useState(null);
    const [editingVehicle, setEditingVehicle] = useState(null);
    const [viewingClient, setViewingClient] = useState(null);
    const [vehicles, setVehicles] = useState([]);
    const [clientServices, setClientServices] = useState([]);
    const [searchTerm, setSearchTerm] = useState('');

    const openClientModal = (client = null) => {
        setEditingClient(client);
        setIsClientModalOpen(true);
    };

    const closeClientModal = () => {
        setIsClientModalOpen(false);
        setEditingClient(null);
    };

    const openVehicleModal = (vehicle = null) => {
        setEditingVehicle(vehicle);
        setIsVehicleModalOpen(true);
    };
    
    const closeVehicleModal = () => {
        setIsVehicleModalOpen(false);
        setEditingVehicle(null);
    };

    const openViewModal = (client) => {
        setViewingClient(client);
        // Carregar veículos do cliente
        const vehicleCollection = collection(db, `users/${user.uid}/clients/${client.id}/vehicles`);
        onSnapshot(vehicleCollection, (snapshot) => {
            const vehicleList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            setVehicles(vehicleList);
        });
        // Filtrar serviços do cliente
        const relatedServices = services.filter(s => s.clientId === client.id);
        setClientServices(relatedServices);
        setIsViewModalOpen(true);
    };

    const closeViewModal = () => {
        setIsViewModalOpen(false);
        setViewingClient(null);
        setVehicles([]);
        setClientServices([]);
    };

    const handleSaveClient = (data) => {
        onSaveClient(data, editingClient?.id);
        closeClientModal();
    };

    const handleSaveVehicle = (data) => {
        onSaveVehicle(data, viewingClient.id, editingVehicle?.id);
        closeVehicleModal();
    };

    const handleDeleteClient = (clientId) => {
        if(window.confirm("Tem certeza que deseja excluir este cliente? Todos os seus veículos e serviços associados também serão excluídos.")){
            onDeleteClient(clientId);
        }
    };

    const handleDeleteVehicle = (vehicleId) => {
        if(window.confirm("Tem certeza que deseja excluir este veículo?")){
            onDeleteVehicle(viewingClient.id, vehicleId);
        }
    };

    const filteredClients = clients.filter(client => 
        client.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (client.cpfCnpj && client.cpfCnpj.includes(searchTerm))
    );

    return (
        <div>
            <div className="flex justify-between items-center mb-6">
                <h1 className="text-3xl font-bold text-white">Clientes</h1>
                <Button onClick={() => openClientModal()}><PlusCircle size={18} className="mr-2" /> Novo Cliente</Button>
            </div>
            
            <div className="mb-6 relative">
                <Input 
                    type="text"
                    placeholder="Buscar por nome ou CPF/CNPJ..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                />
                <Search size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            </div>

            <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full text-left">
                        <thead className="bg-gray-700/50">
                            <tr>
                                <th className="p-4 font-semibold text-gray-300">Nome</th>
                                <th className="p-4 font-semibold text-gray-300">CPF/CNPJ</th>
                                <th className="p-4 font-semibold text-gray-300">Telefone</th>
                                <th className="p-4 font-semibold text-gray-300">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {filteredClients.length > 0 ? filteredClients.map(client => (
                                <tr key={client.id} className="border-b border-gray-700 last:border-b-0 hover:bg-gray-700/30 transition-colors">
                                    <td className="p-4 text-white">{client.name}</td>
                                    <td className="p-4 text-gray-300">{client.cpfCnpj}</td>
                                    <td className="p-4 text-gray-300">{client.phone}</td>
                                    <td className="p-4">
                                        <div className="flex gap-2">
                                            <button onClick={() => openViewModal(client)} className="text-blue-400 hover:text-blue-300"><Search size={18} /></button>
                                            <button onClick={() => openClientModal(client)} className="text-yellow-400 hover:text-yellow-300"><Edit size={18} /></button>
                                            <button onClick={() => handleDeleteClient(client.id)} className="text-red-400 hover:text-red-300"><Trash2 size={18} /></button>
                                        </div>
                                    </td>
                                </tr>
                            )) : (
                                <tr><td colSpan="4" className="text-center p-8 text-gray-400">Nenhum cliente encontrado.</td></tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>

            <Modal isOpen={isClientModalOpen} onClose={closeClientModal} title={editingClient ? "Editar Cliente" : "Novo Cliente"}>
                <ClientForm client={editingClient} onSave={handleSaveClient} onCancel={closeClientModal} />
            </Modal>

            <Modal isOpen={isViewModalOpen} onClose={closeViewModal} title={`Detalhes de ${viewingClient?.name}`}>
                {viewingClient && (
                    <div className="space-y-6">
                        <div>
                            <h3 className="text-lg font-semibold text-blue-400 mb-2">Informações do Cliente</h3>
                            <p className="text-gray-300"><strong>CPF/CNPJ:</strong> {viewingClient.cpfCnpj}</p>
                            <p className="text-gray-300"><strong>Telefone:</strong> {viewingClient.phone}</p>
                            <p className="text-gray-300"><strong>Email:</strong> {viewingClient.email}</p>
                            <p className="text-gray-300"><strong>Endereço:</strong> {viewingClient.address}</p>
                        </div>
                        <div className="border-t border-gray-700 pt-4">
                            <div className="flex justify-between items-center mb-2">
                                <h3 className="text-lg font-semibold text-blue-400">Veículos</h3>
                                <Button onClick={() => openVehicleModal()} size="sm" variant="secondary"><PlusCircle size={16} className="mr-2" /> Adicionar Veículo</Button>
                            </div>
                            <ul className="space-y-2">
                                {vehicles.length > 0 ? vehicles.map(v => (
                                    <li key={v.id} className="bg-gray-700 p-3 rounded-lg flex justify-between items-center">
                                        <div>
                                            <p className="font-bold text-white">{v.plate} - {v.model}</p>
                                            <p className="text-sm text-gray-400">RENAVAM: {v.renavam}</p>
                                        </div>
                                        <div className="flex gap-2">
                                            <button onClick={() => openVehicleModal(v)} className="text-yellow-400 hover:text-yellow-300"><Edit size={16} /></button>
                                            <button onClick={() => handleDeleteVehicle(v.id)} className="text-red-400 hover:text-red-300"><Trash2 size={16} /></button>
                                        </div>
                                    </li>
                                )) : <p className="text-gray-400">Nenhum veículo cadastrado.</p>}
                            </ul>
                        </div>
                        <div className="border-t border-gray-700 pt-4">
                            <h3 className="text-lg font-semibold text-blue-400 mb-2">Histórico de Serviços</h3>
                             <ul className="space-y-2">
                                {clientServices.length > 0 ? clientServices.map(s => (
                                    <li key={s.id} className="bg-gray-700 p-3 rounded-lg">
                                        <div className="flex justify-between items-center">
                                            <p className="font-bold text-white">{s.serviceType} ({s.vehiclePlate})</p>
                                            <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getStatusColor(s.status)}`}>{s.status}</span>
                                        </div>
                                        <p className="text-sm text-gray-400">Data: {new Date(s.openingDate).toLocaleDateString()}</p>
                                    </li>
                                )) : <p className="text-gray-400">Nenhum serviço registrado para este cliente.</p>}
                            </ul>
                        </div>
                    </div>
                )}
            </Modal>
            
            <Modal isOpen={isVehicleModalOpen} onClose={closeVehicleModal} title={editingVehicle ? "Editar Veículo" : "Novo Veículo"}>
                <VehicleForm vehicle={editingVehicle} onSave={handleSaveVehicle} onCancel={closeVehicleModal} />
            </Modal>
        </div>
    );
};

const getStatusColor = (status) => {
    switch (status) {
        case 'Concluído': return 'bg-green-500/20 text-green-300';
        case 'Cancelado': return 'bg-red-500/20 text-red-300';
        case 'Pendente de documentos': return 'bg-yellow-500/20 text-yellow-300';
        case 'Aguardando pagamento': return 'bg-orange-500/20 text-orange-300';
        case 'Protocolado no DETRAN': return 'bg-purple-500/20 text-purple-300';
        default: return 'bg-blue-500/20 text-blue-300'; // Em andamento
    }
};

const ServicesPage = ({ clients, services, onSaveService, onDeleteService }) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingService, setEditingService] = useState(null);
    const [filterStatus, setFilterStatus] = useState('Todos');

    const openModal = (service = null) => {
        setEditingService(service);
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
        setEditingService(null);
    };

    const handleSave = (data) => {
        onSaveService(data, editingService?.id);
        closeModal();
    };

    const handleDelete = (serviceId) => {
        if(window.confirm("Tem certeza que deseja excluir este serviço?")){
            onDeleteService(serviceId);
        }
    };

    const handleStatusChange = async (serviceId, newStatus) => {
        const serviceRef = doc(db, `users/${auth.currentUser.uid}/services`, serviceId);
        try {
            await updateDoc(serviceRef, { status: newStatus });
        } catch (error) {
            console.error("Erro ao atualizar status: ", error);
        }
    };

    const filteredServices = services.filter(service => 
        filterStatus === 'Todos' || service.status === filterStatus
    );

    const statusTypes = ["Todos", "Em andamento", "Pendente de documentos", "Aguardando pagamento", "Protocolado no DETRAN", "Concluído", "Cancelado"];

    return (
        <div>
            <div className="flex justify-between items-center mb-6">
                <h1 className="text-3xl font-bold text-white">Serviços</h1>
                <Button onClick={() => openModal()}><PlusCircle size={18} className="mr-2" /> Novo Serviço</Button>
            </div>
            
            <div className="mb-6">
                <Select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
                    {statusTypes.map(st => <option key={st} value={st}>Filtrar por: {st}</option>)}
                </Select>
            </div>

            <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full text-left">
                        <thead className="bg-gray-700/50">
                            <tr>
                                <th className="p-4 font-semibold text-gray-300">Cliente</th>
                                <th className="p-4 font-semibold text-gray-300">Placa</th>
                                <th className="p-4 font-semibold text-gray-300">Serviço</th>
                                <th className="p-4 font-semibold text-gray-300">Data</th>
                                <th className="p-4 font-semibold text-gray-300">Status</th>
                                <th className="p-4 font-semibold text-gray-300">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {filteredServices.length > 0 ? filteredServices.map(service => (
                                <tr key={service.id} className="border-b border-gray-700 last:border-b-0 hover:bg-gray-700/30 transition-colors">
                                    <td className="p-4 text-white">{service.clientName}</td>
                                    <td className="p-4 text-gray-300">{service.vehiclePlate}</td>
                                    <td className="p-4 text-gray-300">{service.serviceType}</td>
                                    <td className="p-4 text-gray-300">{new Date(service.openingDate).toLocaleDateString()}</td>
                                    <td className="p-4">
                                        <Select 
                                            value={service.status} 
                                            onChange={(e) => handleStatusChange(service.id, e.target.value)}
                                            className={`${getStatusColor(service.status)} border-none`}
                                        >
                                            {statusTypes.slice(1).map(st => <option key={st} value={st}>{st}</option>)}
                                        </Select>
                                    </td>
                                    <td className="p-4">
                                        <div className="flex gap-2">
                                            <button onClick={() => openModal(service)} className="text-yellow-400 hover:text-yellow-300"><Edit size={18} /></button>
                                            <button onClick={() => handleDelete(service.id)} className="text-red-400 hover:text-red-300"><Trash2 size={18} /></button>
                                        </div>
                                    </td>
                                </tr>
                            )) : (
                                <tr><td colSpan="6" className="text-center p-8 text-gray-400">Nenhum serviço encontrado.</td></tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <Modal isOpen={isModalOpen} onClose={closeModal} title={editingService ? "Editar Serviço" : "Novo Serviço"}>
                <ServiceForm service={editingService} clients={clients} onSave={handleSave} onCancel={closeModal} />
            </Modal>
        </div>
    );
};

const FinancialPage = ({ services }) => {
    const [filter, setFilter] = useState('Todos');

    const getPaymentStatus = (service) => {
        const total = service.totalValue || 0;
        const paid = service.paidValue || 0;
        if (paid >= total && total > 0) return 'Pago';
        if (paid > 0 && paid < total) return 'Parcial';
        return 'Pendente';
    };

    const financialData = useMemo(() => {
        return services.map(s => ({
            ...s,
            totalValue: s.totalValue || 0,
            paidValue: s.paidValue || 0,
            paymentStatus: getPaymentStatus(s),
            toReceive: (s.totalValue || 0) - (s.paidValue || 0)
        }));
    }, [services]);

    const filteredData = financialData.filter(s => filter === 'Todos' || s.paymentStatus === filter);

    const totals = useMemo(() => {
        return filteredData.reduce((acc, s) => {
            acc.total += s.totalValue;
            acc.paid += s.paidValue;
            acc.toReceive += s.toReceive;
            return acc;
        }, { total: 0, paid: 0, toReceive: 0 });
    }, [filteredData]);
    
    const paymentStatusTypes = ["Todos", "Pendente", "Parcial", "Pago"];
    
    const getPaymentStatusColor = (status) => {
        switch(status) {
            case 'Pago': return 'bg-green-500/20 text-green-300';
            case 'Parcial': return 'bg-blue-500/20 text-blue-300';
            case 'Pendente': return 'bg-yellow-500/20 text-yellow-300';
            default: return 'bg-gray-500/20 text-gray-300';
        }
    }

    return (
        <div>
            <h1 className="text-3xl font-bold text-white mb-6">Financeiro</h1>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">Faturamento Total</h3>
                    <p className="text-3xl font-bold text-white mt-1">R$ {totals.total.toFixed(2)}</p>
                </div>
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">Total Recebido</h3>
                    <p className="text-3xl font-bold text-green-400 mt-1">R$ {totals.paid.toFixed(2)}</p>
                </div>
                <div className="bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 className="text-gray-400 text-sm font-medium">Total a Receber</h3>
                    <p className="text-3xl font-bold text-yellow-400 mt-1">R$ {totals.toReceive.toFixed(2)}</p>
                </div>
            </div>

            <div className="mb-6">
                <Select value={filter} onChange={(e) => setFilter(e.target.value)}>
                    {paymentStatusTypes.map(st => <option key={st} value={st}>Filtrar por: {st}</option>)}
                </Select>
            </div>

            <div className="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full text-left">
                        <thead className="bg-gray-700/50">
                            <tr>
                                <th className="p-4 font-semibold text-gray-300">Cliente</th>
                                <th className="p-4 font-semibold text-gray-300">Serviço</th>
                                <th className="p-4 font-semibold text-gray-300">Valor Total</th>
                                <th className="p-4 font-semibold text-gray-300">Valor Pago</th>
                                <th className="p-4 font-semibold text-gray-300">A Receber</th>
                                <th className="p-4 font-semibold text-gray-300">Status Pag.</th>
                            </tr>
                        </thead>
                        <tbody>
                            {filteredData.length > 0 ? filteredData.map(service => (
                                <tr key={service.id} className="border-b border-gray-700 last:border-b-0 hover:bg-gray-700/30 transition-colors">
                                    <td className="p-4 text-white">{service.clientName}</td>
                                    <td className="p-4 text-gray-300">{service.serviceType}</td>
                                    <td className="p-4 text-gray-300">R$ {service.totalValue.toFixed(2)}</td>
                                    <td className="p-4 text-green-400">R$ {service.paidValue.toFixed(2)}</td>
                                    <td className="p-4 text-yellow-400">R$ {service.toReceive.toFixed(2)}</td>
                                    <td className="p-4">
                                        <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getPaymentStatusColor(service.paymentStatus)}`}>
                                            {service.paymentStatus}
                                        </span>
                                    </td>
                                </tr>
                            )) : (
                                <tr><td colSpan="6" className="text-center p-8 text-gray-400">Nenhum registro financeiro encontrado.</td></tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};


// --- COMPONENTE PRINCIPAL ---

export default function App() {
    const [user, setUser] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [currentPage, setCurrentPage] = useState('dashboard');
    const [clients, setClients] = useState([]);
    const [services, setServices] = useState([]);

    // --- EFEITO PARA AUTENTICAÇÃO ---
    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            setUser(user);
            setIsLoading(false);
        });
        return () => unsubscribe();
    }, []);

    // --- EFEITOS PARA CARREGAR DADOS DO FIRESTORE ---
    useEffect(() => {
        if (!user) {
            setClients([]);
            setServices([]);
            return;
        }

        // Carregar Clientes
        const clientCollection = collection(db, `users/${user.uid}/clients`);
        const unsubscribeClients = onSnapshot(clientCollection, (snapshot) => {
            const clientList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            setClients(clientList);
        });

        // Carregar Serviços
        const serviceCollection = collection(db, `users/${user.uid}/services`);
        const unsubscribeServices = onSnapshot(serviceCollection, (snapshot) => {
            const serviceList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            setServices(serviceList);
        });

        return () => {
            unsubscribeClients();
            unsubscribeServices();
        };
    }, [user]);

    // --- FUNÇÕES CRUD ---

    // Clientes
    const handleSaveClient = async (data, id) => {
        const clientCollection = collection(db, `users/${user.uid}/clients`);
        try {
            if (id) {
                const clientRef = doc(db, `users/${user.uid}/clients`, id);
                await updateDoc(clientRef, data);
            } else {
                await addDoc(clientCollection, data);
            }
        } catch (error) {
            console.error("Erro ao salvar cliente: ", error);
        }
    };
    
    const handleDeleteClient = async (clientId) => {
        try {
            const batch = writeBatch(db);

            // Deletar o cliente
            const clientRef = doc(db, `users/${user.uid}/clients`, clientId);
            batch.delete(clientRef);

            // Deletar serviços associados
            const servicesQuery = query(collection(db, `users/${user.uid}/services`), where("clientId", "==", clientId));
            const servicesSnapshot = await getDocs(servicesQuery);
            servicesSnapshot.forEach(doc => batch.delete(doc.ref));

            // Deletar veículos (subcoleção)
            const vehiclesCollectionRef = collection(db, `users/${user.uid}/clients/${clientId}/vehicles`);
            const vehiclesSnapshot = await getDocs(vehiclesCollectionRef);
            vehiclesSnapshot.forEach(doc => batch.delete(doc.ref));

            await batch.commit();
        } catch (error) {
            console.error("Erro ao deletar cliente e dados associados: ", error);
        }
    };

    // Veículos
    const handleSaveVehicle = async (data, clientId, vehicleId) => {
        const vehicleCollection = collection(db, `users/${user.uid}/clients/${clientId}/vehicles`);
        try {
            if (vehicleId) {
                const vehicleRef = doc(db, `users/${user.uid}/clients/${clientId}/vehicles`, vehicleId);
                await updateDoc(vehicleRef, data);
            } else {
                await addDoc(vehicleCollection, data);
            }
        } catch (error) {
            console.error("Erro ao salvar veículo: ", error);
        }
    };

    const handleDeleteVehicle = async (clientId, vehicleId) => {
        try {
            const vehicleRef = doc(db, `users/${user.uid}/clients/${clientId}/vehicles`, vehicleId);
            await deleteDoc(vehicleRef);
        } catch (error) {
            console.error("Erro ao deletar veículo: ", error);
        }
    };

    // Serviços
    const handleSaveService = async (data, id) => {
        const serviceCollection = collection(db, `users/${user.uid}/services`);
        try {
            if (id) {
                const serviceRef = doc(db, `users/${user.uid}/services`, id);
                await updateDoc(serviceRef, data);
            } else {
                await addDoc(serviceCollection, data);
            }
        } catch (error) {
            console.error("Erro ao salvar serviço: ", error);
        }
    };

    const handleDeleteService = async (serviceId) => {
        try {
            const serviceRef = doc(db, `users/${user.uid}/services`, serviceId);
            await deleteDoc(serviceRef);
        } catch (error) {
            console.error("Erro ao deletar serviço: ", error);
        }
    };

    const handleLogout = () => {
        signOut(auth);
    };

    if (isLoading) {
        return (
            <div className="min-h-screen bg-gray-900 flex justify-center items-center">
                <Spinner />
            </div>
        );
    }

    if (!user) {
        return <AuthScreen setUser={setUser} />;
    }

    const renderPage = () => {
        switch (currentPage) {
            case 'clients':
                return <ClientsPage 
                            user={user}
                            clients={clients} 
                            services={services}
                            onSaveClient={handleSaveClient} 
                            onDeleteClient={handleDeleteClient}
                            onSaveVehicle={handleSaveVehicle}
                            onDeleteVehicle={handleDeleteVehicle}
                        />;
            case 'services':
                return <ServicesPage 
                            clients={clients} 
                            services={services} 
                            onSaveService={handleSaveService}
                            onDeleteService={handleDeleteService}
                        />;
            case 'financial':
                return <FinancialPage services={services} />;
            case 'dashboard':
            default:
                return <DashboardPage clients={clients} services={services} setCurrentPage={setCurrentPage} />;
        }
    };
    
    const NavItem = ({ icon: Icon, label, page }) => (
        <button 
            onClick={() => setCurrentPage(page)}
            className={`flex items-center w-full px-4 py-3 rounded-lg transition-colors ${currentPage === page ? 'bg-blue-600 text-white' : 'text-gray-400 hover:bg-gray-700 hover:text-white'}`}
        >
            <Icon size={20} className="mr-4" />
            <span className="font-medium">{label}</span>
        </button>
    );

    return (
        <div className="flex min-h-screen bg-gray-900 text-gray-200 font-sans">
            {/* Sidebar */}
            <aside className="w-64 bg-gray-800 p-4 flex-shrink-0 flex flex-col border-r border-gray-700">
                <div className="text-white text-2xl font-bold mb-10 px-2">Despachante<span className="text-blue-500">PRO</span></div>
                <nav className="flex-grow space-y-2">
                    <NavItem icon={Users} label="Dashboard" page="dashboard" />
                    <NavItem icon={Users} label="Clientes" page="clients" />
                    <NavItem icon={FileText} label="Serviços" page="services" />
                    <NavItem icon={DollarSign} label="Financeiro" page="financial" />
                </nav>
                <div className="mt-auto">
                     <div className="text-sm text-gray-400 mb-4 px-2 truncate">
                        <p>Logado como:</p>
                        <p className="font-semibold text-gray-300">{user.email}</p>
                    </div>
                    <button onClick={handleLogout} className="flex items-center w-full px-4 py-3 rounded-lg text-red-400 hover:bg-red-500/20 hover:text-red-300 transition-colors">
                        <LogOut size={20} className="mr-4" />
                        <span className="font-medium">Sair</span>
                    </button>
                </div>
            </aside>
            {/* Main Content */}
            <main className="flex-grow p-8 overflow-auto">
                {renderPage()}
            </main>
        </div>
    );
}