function getBadgeClass(status) {
    switch(status) {
        case "Serviço concluído":    return "badge badge-green";
        case "Em execução":          return "badge badge-accent";
        case "Aguardando peça":      return "badge badge-red";
        case "Orçamento aprovado":   return "badge badge-orange";
        case "Aguardando aprovação": return "badge badge-blue";
        case "Entregue":             return "badge badge-default";
        default:                     return "badge badge-default";
    }
}

function Agenda() {
    const { useState, useEffect, useMemo } = React;
    const [vehicles, setVehicles] = useState([]);
    const [mechanics, setMechanics] = useState([]);
    const [loading, setLoading] = useState(true);
    const [selectedVehicle, setSelectedVehicle] = useState(null);
    const [statusFilter, setStatusFilter] = useState('all');
    const [search, setSearch] = useState('');

    const loadData = ({ silent = false } = {}) => {
        if (!silent) setLoading(true);
        window.api.getVehicles().then(data => {
            setVehicles(data);
            setLoading(false);
        }).catch(() => setLoading(false));
    };

    useEffect(() => {
        loadData();
        window.api.getMechanics().then(setMechanics).catch(() => {});

        const intervalId = setInterval(() => {
            loadData({ silent: true });
        }, 5000);

        return () => clearInterval(intervalId);
    }, []);

    const handleMechanicChange = async (vehicleId, mechanicId) => {
        const val = mechanicId ? parseInt(mechanicId) : null;
        await window.api.updateVehicle(vehicleId, { mechanic_id: val });
        loadData();
    };

    const filtered = useMemo(() => {
        let list = vehicles;
        if (statusFilter === 'active') list = list.filter(v => v.status !== 'Serviço concluído' && v.status !== 'Entregue');
        else if (statusFilter !== 'all') list = list.filter(v => v.status === statusFilter);
        if (search.trim()) {
            const q = search.toLowerCase();
            list = list.filter(v =>
                v.license_plate.toLowerCase().includes(q) ||
                v.vehicle_model.toLowerCase().includes(q) ||
                v.client_name.toLowerCase().includes(q) ||
                v.service_type.toLowerCase().includes(q)
            );
        }
        return list;
    }, [vehicles, statusFilter, search]);

    const activeCount = vehicles.filter(v => v.status !== 'Serviço concluído' && v.status !== 'Entregue').length;

    return (
        <div>
            <header className="page-header" style={{ alignItems: 'center' }}>
                <div>
                    <h1>AGENDA &amp; STATUS</h1>
                    <p className="text-secondary text-sm" style={{ marginTop: '4px' }}>
                        {activeCount} veículo{activeCount !== 1 ? 's' : ''} ativo{activeCount !== 1 ? 's' : ''} · {vehicles.length} total
                    </p>
                </div>
                <button id="btn-novo-veiculo" className="btn btn-primary"
                        onClick={() => setSelectedVehicle('new')}>
                    + Novo Veículo
                </button>
            </header>

            {/* Toolbar */}
            <div style={{ display: 'flex', gap: '12px', marginBottom: '20px', alignItems: 'center' }}>
                {/* Search */}
                <div className="search-wrapper" style={{ flex: 1, maxWidth: '360px' }}>
                    <span className="search-icon">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                        </svg>
                    </span>
                    <input className="input" placeholder="Buscar por placa, modelo ou cliente..."
                           value={search} onChange={e => setSearch(e.target.value)} />
                </div>

                {/* Status filter */}
                <select className="input" style={{ width: 'auto', minWidth: '200px' }}
                        value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
                    <option value="all">Todos os Status</option>
                    <option value="active">Somente Ativos</option>
                    <option value="Em orçamento">Em Orçamento</option>
                    <option value="Aguardando aprovação">Aguardando Aprovação</option>
                    <option value="Orçamento aprovado">Orçamento Aprovado</option>
                    <option value="Em execução">Em Execução</option>
                    <option value="Aguardando peça">Aguardando Peça</option>
                    <option value="Serviço concluído">Serviço Concluído</option>
                    <option value="Entregue">Arquivado / Entregue</option>
                </select>

                {(search || statusFilter !== 'all') && (
                    <button className="btn btn-ghost btn-sm"
                            onClick={() => { setSearch(''); setStatusFilter('all'); }}>
                        Limpar filtros
                    </button>
                )}
            </div>

            {/* Table */}
            <div className="table-container">
                {loading ? (
                    <div style={{ padding: '48px', textAlign: 'center', color: 'var(--text-secondary)' }}>
                        Carregando dados...
                    </div>
                ) : filtered.length === 0 ? (
                    <div className="empty-state">
                        <div className="empty-state-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                                <path d="M19 7H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/><path d="M8 21h8M12 17v4"/>
                            </svg>
                        </div>
                        <p className="empty-state-title">Nenhum veículo encontrado</p>
                        <p className="empty-state-desc">
                            {search ? `Nenhum resultado para "${search}".` : 'Nenhum veículo neste filtro.'}
                        </p>
                        <button className="btn btn-primary btn-sm" style={{ marginTop: '8px' }}
                                onClick={() => setSelectedVehicle('new')}>
                            + Registrar Veículo
                        </button>
                    </div>
                ) : (
                    <table>
                        <thead>
                            <tr>
                                <th className="col-shrink">Placa</th>
                                <th>Veículo &amp; Serviço</th>
                                <th>Cliente</th>
                                <th>Mecânico</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {filtered.map(v => (
                                <tr key={v.id} onClick={() => setSelectedVehicle(v.id)}>
                                    <td className="col-shrink">
                                        <span className="text-truncate" title={v.license_plate} style={{
                                            display: 'inline-block', fontFamily: 'var(--font-mono)', fontWeight: 700,
                                            fontSize: '0.875rem', letterSpacing: '0.08em',
                                            background: 'var(--surface-2)', border: '1px solid var(--border)',
                                            padding: '3px 8px', borderRadius: '4px', maxWidth: '160px'
                                        }}>{v.license_plate}</span>
                                    </td>
                                    <td style={{ maxWidth: '320px' }}>
                                        <div className="text-truncate" title={v.vehicle_model} style={{ fontWeight: 600 }}>{v.vehicle_model}</div>
                                        <div className="text-xs text-secondary mt-1 text-clamp-2" title={v.service_type}>{v.service_type}</div>
                                    </td>
                                    <td style={{ maxWidth: '220px' }}>
                                        <div className="text-truncate" title={v.client_name}>{v.client_name}</div>
                                        <div className="text-xs text-muted mt-1 text-truncate" title={v.phone}>{v.phone}</div>
                                    </td>
                                    <td className="text-secondary" onClick={e => e.stopPropagation()}>
                                        <select 
                                            className="input" 
                                            style={{ padding: '4px 8px', fontSize: '0.8rem', minWidth: '140px', cursor: 'pointer' }}
                                            value={v.mechanic?.id || ""}
                                            onChange={e => handleMechanicChange(v.id, e.target.value)}
                                        >
                                            <option value="">Não atribuído</option>
                                            {mechanics.map(m => (
                                                <option key={m.id} value={m.id}>
                                                    {m.name}
                                                </option>
                                            ))}
                                        </select>
                                    </td>
                                    <td>
                                        <span className={getBadgeClass(v.status)}>{v.status}</span>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </div>

            <window.VehicleModal
                vehicleId={selectedVehicle}
                isOpen={!!selectedVehicle}
                onClose={() => setSelectedVehicle(null)}
                onUpdated={loadData}
                onDeleted={(id) => setVehicles(prev => prev.filter(v => v.id !== id))}
            />
        </div>
    );
}

window.Agenda = Agenda;