function Mechanics() {
    const { useState, useEffect } = React;
    const [mechanics, setMechanics] = useState([]);
    const [loading, setLoading] = useState(true);

    const loadData = () => {
        setLoading(true);
        window.api.getMechanics().then(data => {
            setMechanics(data);
            setLoading(false);
        }).catch(() => setLoading(false));
    };

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

    const handleCreate = async () => {
        const name = prompt("Nome do mecânico:");
        if (name === null) return;

        const error = window.validators.validatePersonName(name, { label: 'Nome do mecânico' });
        if (error) { alert(error); return; }

        try {
            await window.api.createMechanic({ name: name.trim() });
            loadData();
        } catch (err) {
            alert(err.message);
        }
    };

    const handleEdit = async (mechanic) => {
        const name = prompt("Novo nome do mecânico:", mechanic.name);
        if (name === null || name.trim() === mechanic.name) return;

        const error = window.validators.validatePersonName(name, { label: 'Nome do mecânico' });
        if (error) { alert(error); return; }

        try {
            await window.api.updateMechanic(mechanic.id, { name: name.trim() });
            loadData();
        } catch (err) {
            alert(err.message);
        }
    };

    const handleDelete = async (id, name) => {
        if (!confirm(`Tem certeza que deseja remover o mecânico "${name}"?`)) return;

        try {
            await window.api.deleteMechanic(id);
            loadData();
        } catch (err) {
            alert(err.message);
        }
    };

    return (
        <div>
            <header className="page-header" style={{ alignItems: 'center' }}>
                <div>
                    <h1>MECÂNICOS</h1>
                    <p className="text-secondary text-sm" style={{ marginTop: '4px' }}>
                        Gerencie a equipe da oficina
                    </p>
                </div>
                <button className="btn btn-primary" onClick={handleCreate}>
                    + Novo Mecânico
                </button>
            </header>

            <div className="table-container">
                {loading ? (
                    <div style={{ padding: '48px', textAlign: 'center', color: 'var(--text-secondary)' }}>
                        Carregando dados...
                    </div>
                ) : mechanics.length === 0 ? (
                    <div className="empty-state">
                        <p className="empty-state-title">Nenhum mecânico cadastrado</p>
                        <button className="btn btn-primary btn-sm" style={{ marginTop: '8px' }} onClick={handleCreate}>
                            + Cadastrar
                        </button>
                    </div>
                ) : (
                    <table>
                        <thead>
                            <tr>
                                <th style={{ width: '80px' }}>ID</th>
                                <th>Nome</th>
                                <th style={{ width: '150px', textAlign: 'right' }}>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {mechanics.map(m => (
                                <tr key={m.id}>
                                    <td className="text-muted">#{m.id}</td>
                                    <td>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 600 }}>
                                            <span style={{
                                                width: '28px', height: '28px', borderRadius: '50%',
                                                background: 'var(--accent-glow)', border: '1px solid var(--accent-dim)',
                                                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                                                fontSize: '0.75rem', fontWeight: 700, color: 'var(--accent)'
                                            }}>{m.name[0]}</span>
                                            {m.name}
                                        </div>
                                    </td>
                                    <td style={{ textAlign: 'right' }}>
                                        <button className="btn btn-ghost btn-sm" onClick={() => handleEdit(m)} style={{ marginRight: '6px' }}>Editar</button>
                                        <button className="btn btn-ghost btn-sm" onClick={() => handleDelete(m.id, m.name)} style={{ color: 'var(--red)' }}>Remover</button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </div>
        </div>
    );
}

window.Mechanics = Mechanics;