import React, { useState, useEffect, useCallback } from 'react';
import { FlaskConical, Plus, X, Search, Clock, AlertTriangle, ImagePlus, ChevronRight, Trash2, RefreshCw, ShieldCheck, Tags, Pencil, Check } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { useToast } from '../contexts/ToastContext.tsx';
import { useConfirm } from '../contexts/ConfirmContext.tsx';
import { PageHeader } from '../components/PageHeader.tsx';

const fmtBRL = (v: number) => 'R$ ' + Number(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2 });
const dataBR = (d: string) => (d || '').slice(0, 10).split('-').reverse().join('/');

const STATUS_LABEL: Record<string, string> = {
    solicitado: 'Solicitado', recebido: 'Recebido', producao: 'Em produção',
    prova: 'Prova', ajuste: 'Ajuste', finalizado: 'Finalizado', entregue: 'Entregue', cancelado: 'Cancelado',
};
const STATUS_COR: Record<string, string> = {
    solicitado: 'bg-gray-100 text-gray-600', recebido: 'bg-blue-100 text-blue-700', producao: 'bg-amber-100 text-amber-700',
    prova: 'bg-indigo-100 text-indigo-700', ajuste: 'bg-orange-100 text-orange-700', finalizado: 'bg-teal-100 text-teal-700',
    entregue: 'bg-green-100 text-green-700', cancelado: 'bg-red-100 text-red-600',
};
const LAB_FLUXO = ['recebido', 'producao', 'prova', 'ajuste', 'finalizado'];

const Badge: React.FC<{ s: string }> = ({ s }) => (
    <span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase ${STATUS_COR[s] || 'bg-gray-100 text-gray-600'}`}>{STATUS_LABEL[s] || s}</span>
);

// ── Modal: Nova OS (lado clínica) ───────────────────────────────────────────
const NovaOSModal: React.FC<{ onClose: () => void; onSaved: () => void }> = ({ onClose, onSaved }) => {
    const toast = useToast();
    const [labs, setLabs] = useState<any[]>([]);
    const [dentistas, setDentistas] = useState<any[]>([]);
    const [busca, setBusca] = useState('');
    const [pacientes, setPacientes] = useState<any[]>([]);
    const [paciente, setPaciente] = useState<any>(null);
    const [produtos, setProdutos] = useState<any[]>([]);
    const [form, setForm] = useState<any>({ protetico_id: '', produto_id: '', tipo: '', dentista_id: '', material: '', cor: '', dentes: '', prazo_entrega: '', valor: '', observacoes: '' });
    const [saving, setSaving] = useState(false);
    const ws = HybridBackend.getActiveWorkspace();

    useEffect(() => {
        HybridBackend.getProteseLaboratorios().then(r => setLabs(Array.isArray(r) ? r : [])).catch(() => setLabs([]));
        HybridBackend.getDentistas(ws?.id).then(r => setDentistas(Array.isArray(r) ? r : [])).catch(() => setDentistas([]));
    }, [ws?.id]);

    // Catálogo (preço fixo) do laboratório escolhido.
    useEffect(() => {
        if (!form.protetico_id) { setProdutos([]); return; }
        HybridBackend.getLaboratorioProdutos(form.protetico_id)
            .then(r => setProdutos(Array.isArray(r) ? r : []))
            .catch(() => setProdutos([]));
        setForm((f: any) => ({ ...f, produto_id: '', tipo: '' }));
    }, [form.protetico_id]);

    const produtoSel = produtos.find(p => p.id === form.produto_id);

    useEffect(() => {
        if (paciente) return;
        const t = setTimeout(() => {
            HybridBackend.getPacientes(busca).then(r => setPacientes(r.data || [])).catch(() => setPacientes([]));
        }, 250);
        return () => clearTimeout(t);
    }, [busca, paciente]);

    const set = (k: string, v: any) => setForm((f: any) => ({ ...f, [k]: v }));

    const salvar = async () => {
        if (!form.protetico_id) { toast.error('SELECIONE O LABORATÓRIO.'); return; }
        if (!form.produto_id && !form.tipo) { toast.error('SELECIONE O PRODUTO.'); return; }
        const dent = dentistas.find(d => d.id === form.dentista_id);
        setSaving(true);
        try {
            await HybridBackend.createProteseOS({
                ...form,
                valor: Number(form.valor) || 0,
                paciente_id: paciente?.id || null,
                paciente_nome: paciente?.nome || null,
                dentista_nome: dent?.nome || null,
            });
            toast.success('OS DE PRÓTESE CRIADA.');
            onSaved();
        } catch (e: any) { toast.error((e.message || 'ERRO').toUpperCase()); }
        finally { setSaving(false); }
    };

    return (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
            <div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
                <div className="flex items-center justify-between p-5 border-b border-gray-100 sticky top-0 bg-white">
                    <h3 className="font-black text-gray-800 uppercase text-sm flex items-center gap-2"><FlaskConical size={16} className="text-violet-600" /> Nova OS de Prótese</h3>
                    <button onClick={onClose}><X size={20} className="text-gray-400" /></button>
                </div>
                <div className="p-5 space-y-4">
                    {/* Paciente */}
                    <div>
                        <label className="text-[10px] font-black text-gray-500 uppercase">Paciente (opcional)</label>
                        {paciente ? (
                            <div className="flex items-center justify-between bg-gray-50 rounded-xl px-3 py-2 mt-1">
                                <span className="text-sm font-bold text-gray-700">{paciente.nome}</span>
                                <button onClick={() => { setPaciente(null); setBusca(''); }}><X size={16} className="text-gray-400" /></button>
                            </div>
                        ) : (
                            <div className="relative mt-1">
                                <Search size={15} className="absolute left-3 top-2.5 text-gray-300" />
                                <input value={busca} onChange={e => setBusca(e.target.value)} placeholder="Buscar paciente..."
                                    className="w-full pl-9 pr-3 py-2 rounded-xl border border-gray-200 text-sm" />
                                {busca && pacientes.length > 0 && (
                                    <div className="absolute z-10 left-0 right-0 mt-1 bg-white border border-gray-100 rounded-xl shadow-lg max-h-40 overflow-y-auto">
                                        {pacientes.slice(0, 8).map(p => (
                                            <button key={p.id} onClick={() => { setPaciente(p); }} className="w-full text-left px-3 py-2 hover:bg-gray-50 text-sm font-medium text-gray-700">{p.nome}</button>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                    {/* Laboratório */}
                    <div>
                        <label className="text-[10px] font-black text-gray-500 uppercase">Laboratório / Protético *</label>
                        <select value={form.protetico_id} onChange={e => set('protetico_id', e.target.value)} className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm">
                            <option value="">Selecione...</option>
                            {labs.map(l => <option key={l.id} value={l.id}>{l.nome}{l.interno ? ' (interno)' : ''}</option>)}
                        </select>
                        {labs.length === 0 && <p className="text-[10px] text-gray-400 mt-1">Nenhum protético com vínculo ou no diretório. Convide um na Equipe ou no marketplace de Profissionais.</p>}
                    </div>
                    {/* Produto (catálogo do laboratório — preço fixo) */}
                    <div>
                        <label className="text-[10px] font-black text-gray-500 uppercase">Produto / Trabalho *</label>
                        {form.protetico_id && produtos.length > 0 ? (
                            <select value={form.produto_id} onChange={e => set('produto_id', e.target.value)} className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm">
                                <option value="">Selecione...</option>
                                {produtos.map(p => <option key={p.id} value={p.id}>{p.nome} — {fmtBRL(p.preco)}</option>)}
                            </select>
                        ) : (
                            <input value={form.tipo} onChange={e => set('tipo', e.target.value)} placeholder={form.protetico_id ? 'Sem catálogo — descreva o trabalho' : 'Selecione o laboratório primeiro'} disabled={!form.protetico_id}
                                className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm disabled:bg-gray-50" />
                        )}
                        {produtoSel && (
                            <p className="text-[10px] text-gray-500 mt-1">Custo de laboratório <b>{fmtBRL(produtoSel.preco)}</b> · garantia <b>{produtoSel.garantia_meses} meses</b></p>
                        )}
                    </div>
                    {/* Dentista */}
                    <div>
                        <label className="text-[10px] font-black text-gray-500 uppercase">Dentista</label>
                        <select value={form.dentista_id} onChange={e => set('dentista_id', e.target.value)} className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm">
                            <option value="">—</option>
                            {dentistas.map(d => <option key={d.id} value={d.id}>{d.nome}</option>)}
                        </select>
                    </div>
                    {/* Material + cor + dentes */}
                    <div className="grid grid-cols-3 gap-3">
                        <div><label className="text-[10px] font-black text-gray-500 uppercase">Material</label><input value={form.material} onChange={e => set('material', e.target.value)} placeholder="Zircônia..." className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm" /></div>
                        <div><label className="text-[10px] font-black text-gray-500 uppercase">Cor</label><input value={form.cor} onChange={e => set('cor', e.target.value)} placeholder="A2..." className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm" /></div>
                        <div><label className="text-[10px] font-black text-gray-500 uppercase">Dentes</label><input value={form.dentes} onChange={e => set('dentes', e.target.value)} placeholder="11,21" className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm" /></div>
                    </div>
                    {/* Prazo + valor cobrado do paciente */}
                    <div className="grid grid-cols-2 gap-3">
                        <div><label className="text-[10px] font-black text-gray-500 uppercase">Prazo de entrega</label><input type="date" value={form.prazo_entrega} onChange={e => set('prazo_entrega', e.target.value)} className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm" /></div>
                        <div><label className="text-[10px] font-black text-gray-500 uppercase">Valor ao paciente R$</label><input type="number" value={form.valor} onChange={e => set('valor', e.target.value)} placeholder="0,00" className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm" /></div>
                    </div>
                    <div>
                        <label className="text-[10px] font-black text-gray-500 uppercase">Observações</label>
                        <textarea value={form.observacoes} onChange={e => set('observacoes', e.target.value)} rows={2} className="w-full mt-1 px-3 py-2 rounded-xl border border-gray-200 text-sm" />
                    </div>
                </div>
                <div className="p-5 border-t border-gray-100 flex gap-3 sticky bottom-0 bg-white">
                    <button onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-gray-200 font-black text-gray-500 text-sm uppercase">Cancelar</button>
                    <button onClick={salvar} disabled={saving} className="flex-1 py-2.5 rounded-xl bg-violet-600 text-white font-black text-sm uppercase disabled:opacity-50">{saving ? 'Salvando...' : 'Criar OS'}</button>
                </div>
            </div>
        </div>
    );
};

// ── Modal: Detalhe da OS (timeline + fotos + ações por papel) ───────────────
const OSDetailModal: React.FC<{ id: string; modo: 'bancada' | 'clinica'; onClose: () => void; onChanged: () => void }> = ({ id, modo, onClose, onChanged }) => {
    const toast = useToast();
    const confirm = useConfirm();
    const [os, setOs] = useState<any>(null);
    const [busy, setBusy] = useState(false);

    const carregar = useCallback(() => {
        HybridBackend.getProteseOSDetalhe(id).then(setOs).catch(() => toast.error('ERRO AO CARREGAR.'));
    }, [id, toast]);
    useEffect(() => { carregar(); }, [carregar]);

    const mudar = async (status: string) => {
        if (status === 'cancelado' && !(await confirm('CANCELAR ESTA OS?'))) return;
        setBusy(true);
        try { await HybridBackend.setProteseOSStatus(id, status); toast.success(`OS: ${(STATUS_LABEL[status] || status).toUpperCase()}.`); carregar(); onChanged(); }
        catch (e: any) { toast.error((e.message || 'ERRO').toUpperCase()); }
        finally { setBusy(false); }
    };

    const anexar = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]; if (!file) return;
        setBusy(true);
        try { await HybridBackend.uploadProteseFoto(id, file); toast.success('FOTO ANEXADA.'); carregar(); }
        catch (err: any) { toast.error((err.message || 'ERRO').toUpperCase()); }
        finally { setBusy(false); }
    };

    const acionarGarantia = async () => {
        if (!(await confirm('ABRIR UMA OS DE GARANTIA (SEM CUSTO) PARA REFAZER ESTE TRABALHO?'))) return;
        setBusy(true);
        try {
            await HybridBackend.createProteseOS({
                protetico_id: os.protetico_id, produto_id: os.produto_id || null, tipo: os.tipo,
                tipo_os: 'garantia', origem_os_id: os.id,
                paciente_id: os.paciente_id, paciente_nome: os.paciente_nome,
                dentista_id: os.dentista_id, dentista_nome: os.dentista_nome,
                material: os.material, cor: os.cor, dentes: os.dentes,
                observacoes: `Garantia da OS ${os.id}`,
            });
            toast.success('OS DE GARANTIA ABERTA (SEM CUSTO).');
            onChanged(); onClose();
        } catch (e: any) { toast.error((e.message || 'ERRO').toUpperCase()); }
        finally { setBusy(false); }
    };

    if (!os) return null;
    const finalizado = os.status === 'entregue' || os.status === 'cancelado';
    const naGarantia = os.status === 'entregue' && os.garantia_ate && os.garantia_ate >= new Date().toISOString().slice(0, 10);

    return (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
            <div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
                <div className="flex items-center justify-between p-5 border-b border-gray-100 sticky top-0 bg-white">
                    <div>
                        <h3 className="font-black text-gray-800 uppercase text-sm flex items-center gap-2"><FlaskConical size={16} className="text-violet-600" /> {os.tipo}</h3>
                        <p className="text-xs text-gray-400 mt-0.5">{os.paciente_nome || 'Sem paciente'} {os.dentes ? `· dentes ${os.dentes}` : ''}</p>
                    </div>
                    <button onClick={onClose}><X size={20} className="text-gray-400" /></button>
                </div>
                <div className="p-5 space-y-4">
                    <div className="flex items-center gap-2 flex-wrap">
                        <Badge s={os.status} />
                        {os.tipo_os === 'garantia' && <span className="text-[9px] font-black px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 uppercase flex items-center gap-1"><ShieldCheck size={10} /> Garantia</span>}
                        {os.atrasada && <span className="text-[9px] font-black px-2 py-0.5 rounded-full bg-red-100 text-red-600 uppercase flex items-center gap-1"><AlertTriangle size={10} /> Atrasada</span>}
                        {os.prazo_entrega && <span className="text-[10px] text-gray-400 flex items-center gap-1"><Clock size={11} /> {dataBR(os.prazo_entrega)}</span>}
                    </div>
                    {os.garantia_ate && (
                        <div className="bg-emerald-50 rounded-xl px-3 py-2 flex items-center gap-2 text-xs text-emerald-700 font-bold">
                            <ShieldCheck size={14} /> Garantia até {dataBR(os.garantia_ate)} ({os.garantia_meses || 12} meses)
                        </div>
                    )}
                    <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
                        {os.material && <div><span className="text-gray-400 font-bold uppercase text-[9px] block">Material</span>{os.material}</div>}
                        {os.cor && <div><span className="text-gray-400 font-bold uppercase text-[9px] block">Cor</span>{os.cor}</div>}
                        {os.dentista_nome && <div><span className="text-gray-400 font-bold uppercase text-[9px] block">Dentista</span>{os.dentista_nome}</div>}
                        {modo === 'bancada' && Number(os.custo) > 0 && <div><span className="text-gray-400 font-bold uppercase text-[9px] block">Custo lab</span>{fmtBRL(os.custo)}</div>}
                        {modo === 'clinica' && Number(os.valor) > 0 && <div><span className="text-gray-400 font-bold uppercase text-[9px] block">Valor</span>{fmtBRL(os.valor)}</div>}
                    </div>
                    {os.observacoes && <p className="text-xs text-gray-600 bg-gray-50 rounded-xl p-3">{os.observacoes}</p>}

                    {/* Fotos */}
                    {os.fotos?.length > 0 && (
                        <div className="flex gap-2 flex-wrap">
                            {os.fotos.map((f: any) => (
                                <a key={f.id} href={f.url} target="_blank" rel="noreferrer"><img src={f.url} alt="" className="w-16 h-16 object-cover rounded-lg border border-gray-100" /></a>
                            ))}
                        </div>
                    )}

                    {/* Timeline */}
                    <div>
                        <p className="text-[10px] font-black text-gray-400 uppercase mb-2">Histórico</p>
                        <div className="space-y-2">
                            {os.eventos?.map((ev: any, i: number) => (
                                <div key={i} className="flex items-start gap-2 text-xs">
                                    <span className="w-2 h-2 rounded-full bg-violet-400 mt-1 shrink-0" />
                                    <div>
                                        <span className="font-bold text-gray-700">{STATUS_LABEL[ev.status] || ev.observacao || ev.status}</span>
                                        <span className="text-gray-400"> · {dataBR(ev.created_at)} {ev.actor_nome ? `· ${ev.actor_nome}` : ''}</span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Ações por papel */}
                {!finalizado && (
                    <div className="p-5 border-t border-gray-100 sticky bottom-0 bg-white space-y-2">
                        {modo === 'bancada' ? (
                            <>
                                <div className="flex gap-2 flex-wrap">
                                    {LAB_FLUXO.map(s => (
                                        <button key={s} disabled={busy || os.status === s} onClick={() => mudar(s)}
                                            className={`px-3 py-2 rounded-xl text-xs font-black uppercase disabled:opacity-40 ${os.status === s ? 'bg-violet-600 text-white' : 'border border-violet-200 text-violet-700 hover:bg-violet-50'}`}>{STATUS_LABEL[s]}</button>
                                    ))}
                                </div>
                                <label className="flex items-center justify-center gap-2 py-2 rounded-xl border border-dashed border-gray-200 text-gray-500 text-xs font-bold uppercase cursor-pointer">
                                    <ImagePlus size={15} /> Anexar foto do trabalho
                                    <input type="file" accept="image/*" className="hidden" onChange={anexar} />
                                </label>
                            </>
                        ) : (
                            <>
                                {!os.fotos?.length && <p className="text-[10px] text-amber-600 font-bold uppercase flex items-center gap-1"><AlertTriangle size={11} /> Anexe ao menos 1 foto antes de entregar (garantia)</p>}
                                <div className="flex gap-2">
                                    <button disabled={busy} onClick={() => mudar('entregue')} className="flex-1 py-2.5 rounded-xl bg-green-600 text-white font-black text-sm uppercase disabled:opacity-50">Marcar entregue</button>
                                    <button disabled={busy} onClick={() => mudar('cancelado')} className="px-4 py-2.5 rounded-xl border border-red-200 text-red-600 font-black text-sm uppercase disabled:opacity-50">Cancelar</button>
                                </div>
                            </>
                        )}
                    </div>
                )}
                {naGarantia && modo === 'clinica' && (
                    <div className="p-5 border-t border-gray-100 sticky bottom-0 bg-white">
                        <button disabled={busy} onClick={acionarGarantia} className="w-full py-2.5 rounded-xl bg-emerald-600 text-white font-black text-sm uppercase disabled:opacity-50 flex items-center justify-center gap-2"><ShieldCheck size={16} /> Acionar garantia (refazer sem custo)</button>
                    </div>
                )}
            </div>
        </div>
    );
};

// ── Modal: Catálogo do protético (produtos com preço fixo + garantia) ───────
const ProdutosModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
    const toast = useToast();
    const confirm = useConfirm();
    const [itens, setItens] = useState<any[]>([]);
    const [novo, setNovo] = useState({ nome: '', preco: '', garantia_meses: '12' });
    const [editId, setEditId] = useState<string | null>(null);
    const [edit, setEdit] = useState<any>({});

    const carregar = useCallback(() => {
        HybridBackend.getProteseProdutos().then(r => setItens(Array.isArray(r) ? r : [])).catch(() => setItens([]));
    }, []);
    useEffect(() => { carregar(); }, [carregar]);

    const add = async () => {
        if (!novo.nome.trim()) { toast.error('INFORME O NOME.'); return; }
        try { await HybridBackend.createProteseProduto({ nome: novo.nome.trim(), preco: Number(novo.preco) || 0, garantia_meses: Number(novo.garantia_meses) || 12 });
            setNovo({ nome: '', preco: '', garantia_meses: '12' }); carregar(); }
        catch (e: any) { toast.error((e.message || 'ERRO').toUpperCase()); }
    };
    const salvarEdit = async (id: string) => {
        try { await HybridBackend.updateProteseProduto(id, { nome: edit.nome, preco: Number(edit.preco) || 0, garantia_meses: Number(edit.garantia_meses) || 12 }); setEditId(null); carregar(); }
        catch (e: any) { toast.error((e.message || 'ERRO').toUpperCase()); }
    };
    const remover = async (id: string) => {
        if (!(await confirm('REMOVER ESTE PRODUTO DO CATÁLOGO?'))) return;
        try { await HybridBackend.deleteProteseProduto(id); carregar(); } catch { toast.error('ERRO AO REMOVER.'); }
    };

    return (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
            <div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
                <div className="flex items-center justify-between p-5 border-b border-gray-100 sticky top-0 bg-white">
                    <h3 className="font-black text-gray-800 uppercase text-sm flex items-center gap-2"><Tags size={16} className="text-violet-600" /> Meus produtos de prótese</h3>
                    <button onClick={onClose}><X size={20} className="text-gray-400" /></button>
                </div>
                <div className="p-5 space-y-2">
                    {/* Adicionar */}
                    <div className="flex gap-2 items-end bg-gray-50 rounded-xl p-3">
                        <div className="flex-1"><label className="text-[9px] font-black text-gray-500 uppercase">Produto</label><input value={novo.nome} onChange={e => setNovo({ ...novo, nome: e.target.value })} placeholder="Coroa de Zircônia" className="w-full mt-1 px-2 py-1.5 rounded-lg border border-gray-200 text-sm" /></div>
                        <div className="w-20"><label className="text-[9px] font-black text-gray-500 uppercase">Preço</label><input type="number" value={novo.preco} onChange={e => setNovo({ ...novo, preco: e.target.value })} placeholder="0" className="w-full mt-1 px-2 py-1.5 rounded-lg border border-gray-200 text-sm" /></div>
                        <div className="w-16"><label className="text-[9px] font-black text-gray-500 uppercase">Gar.(m)</label><input type="number" value={novo.garantia_meses} onChange={e => setNovo({ ...novo, garantia_meses: e.target.value })} className="w-full mt-1 px-2 py-1.5 rounded-lg border border-gray-200 text-sm" /></div>
                        <button onClick={add} className="p-2 rounded-lg bg-violet-600 text-white"><Plus size={16} /></button>
                    </div>
                    {/* Lista */}
                    {itens.map(p => (
                        <div key={p.id} className="flex items-center gap-2 px-3 py-2 rounded-xl border border-gray-100">
                            {editId === p.id ? (
                                <>
                                    <input value={edit.nome} onChange={e => setEdit({ ...edit, nome: e.target.value })} className="flex-1 px-2 py-1 rounded-lg border border-gray-200 text-sm" />
                                    <input type="number" value={edit.preco} onChange={e => setEdit({ ...edit, preco: e.target.value })} className="w-20 px-2 py-1 rounded-lg border border-gray-200 text-sm" />
                                    <input type="number" value={edit.garantia_meses} onChange={e => setEdit({ ...edit, garantia_meses: e.target.value })} className="w-14 px-2 py-1 rounded-lg border border-gray-200 text-sm" />
                                    <button onClick={() => salvarEdit(p.id)} className="text-green-600"><Check size={16} /></button>
                                </>
                            ) : (
                                <>
                                    <span className="flex-1 text-sm font-bold text-gray-700">{p.nome}</span>
                                    <span className="text-sm text-gray-500">{fmtBRL(p.preco)}</span>
                                    <span className="text-[10px] text-gray-400">{p.garantia_meses}m</span>
                                    <button onClick={() => { setEditId(p.id); setEdit({ nome: p.nome, preco: p.preco, garantia_meses: p.garantia_meses }); }} className="text-gray-300 hover:text-violet-600"><Pencil size={14} /></button>
                                    <button onClick={() => remover(p.id)} className="text-gray-300 hover:text-red-500"><Trash2 size={14} /></button>
                                </>
                            )}
                        </div>
                    ))}
                    {itens.length === 0 && <p className="text-center text-gray-400 text-sm py-6">Nenhum produto. Adicione acima.</p>}
                </div>
            </div>
        </div>
    );
};

// ── View principal ──────────────────────────────────────────────────────────
export const ProteseView: React.FC = () => {
    const role = HybridBackend.getCurrentRole();
    const modo: 'bancada' | 'clinica' = role === 'protetico' ? 'bancada' : 'clinica';
    const toast = useToast();
    const confirm = useConfirm();
    const [lista, setLista] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [filtro, setFiltro] = useState('');
    const [novaOS, setNovaOS] = useState(false);
    const [detalhe, setDetalhe] = useState<string | null>(null);
    const [produtosModal, setProdutosModal] = useState(false);

    const carregar = useCallback(() => {
        setLoading(true);
        const p = modo === 'bancada'
            ? HybridBackend.getProteseBancada(filtro || undefined)
            : HybridBackend.getProteseOS(filtro ? { status: filtro } : {});
        p.then(r => setLista(Array.isArray(r) ? r : [])).catch(() => setLista([])).finally(() => setLoading(false));
    }, [modo, filtro]);
    useEffect(() => { carregar(); }, [carregar]);

    const excluir = async (id: string) => {
        if (!(await confirm('EXCLUIR ESTA OS?'))) return;
        try { await HybridBackend.deleteProteseOS(id); toast.success('OS EXCLUÍDA.'); carregar(); }
        catch { toast.error('ERRO AO EXCLUIR.'); }
    };

    const STATUS_FILTRO = modo === 'bancada'
        ? ['', 'recebido', 'producao', 'prova', 'ajuste', 'finalizado', 'entregue']
        : ['', 'solicitado', 'recebido', 'producao', 'finalizado', 'entregue', 'cancelado'];

    return (
        <div className="p-4 md:p-8 max-w-5xl mx-auto">
            <PageHeader
                title={modo === 'bancada' ? 'Bancada de Próteses' : 'Próteses'}
                description={modo === 'bancada' ? 'Fila de trabalhos do laboratório' : 'Ordens de serviço enviadas ao laboratório'}
            >
                {modo === 'clinica' ? (
                    <button onClick={() => setNovaOS(true)} className="flex items-center gap-2 bg-violet-600 text-white px-4 py-2 rounded-xl font-black text-sm uppercase">
                        <Plus size={16} /> Nova OS
                    </button>
                ) : (
                    <>
                        <button onClick={() => setProdutosModal(true)} className="flex items-center gap-2 bg-violet-600 text-white px-4 py-2 rounded-xl font-black text-sm uppercase"><Tags size={16} /> Meus produtos</button>
                        <button onClick={carregar} className="flex items-center gap-2 border border-gray-200 text-gray-500 px-3 py-2 rounded-xl font-black text-xs uppercase"><RefreshCw size={14} /> Atualizar</button>
                    </>
                )}
            </PageHeader>

            {/* Filtros de status */}
            <div className="flex gap-2 flex-wrap mb-4 mt-2">
                {STATUS_FILTRO.map(s => (
                    <button key={s} onClick={() => setFiltro(s)}
                        className={`px-3 py-1.5 rounded-full text-[10px] font-black uppercase ${filtro === s ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-500'}`}>
                        {s === '' ? 'Todas' : STATUS_LABEL[s]}
                    </button>
                ))}
            </div>

            {loading ? (
                <p className="text-center text-gray-400 py-12 text-sm">Carregando...</p>
            ) : lista.length === 0 ? (
                <div className="text-center py-16">
                    <FlaskConical size={40} className="mx-auto text-gray-200 mb-3" />
                    <p className="text-gray-400 text-sm font-bold uppercase">{modo === 'bancada' ? 'Nenhum trabalho na bancada' : 'Nenhuma OS de prótese'}</p>
                </div>
            ) : (
                <div className="space-y-2">
                    {lista.map(os => (
                        <div key={os.id} onClick={() => setDetalhe(os.id)}
                            className="bg-white rounded-2xl border border-gray-100 p-4 flex items-center gap-3 hover:border-violet-200 cursor-pointer transition-colors">
                            <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${os.atrasada ? 'bg-red-100' : 'bg-violet-100'}`}>
                                <FlaskConical size={18} className={os.atrasada ? 'text-red-500' : 'text-violet-600'} />
                            </div>
                            <div className="min-w-0 flex-1">
                                <p className="font-bold text-gray-800 text-sm truncate">{os.tipo} {os.dentes ? <span className="text-gray-400 font-medium">· {os.dentes}</span> : ''}</p>
                                <p className="text-xs text-gray-400 truncate">
                                    {modo === 'bancada' ? (os.paciente_nome || 'Sem paciente') : (os.protetico_nome || 'Laboratório')}
                                    {os.prazo_entrega ? ` · entrega ${dataBR(os.prazo_entrega)}` : ''}
                                </p>
                            </div>
                            <div className="flex items-center gap-2 shrink-0">
                                {os.atrasada && <AlertTriangle size={14} className="text-red-500" />}
                                <Badge s={os.status} />
                                {modo === 'clinica' && os.status !== 'entregue' && (
                                    <button onClick={e => { e.stopPropagation(); excluir(os.id); }} className="text-gray-300 hover:text-red-500"><Trash2 size={15} /></button>
                                )}
                                <ChevronRight size={16} className="text-gray-300" />
                            </div>
                        </div>
                    ))}
                </div>
            )}

            {novaOS && <NovaOSModal onClose={() => setNovaOS(false)} onSaved={() => { setNovaOS(false); carregar(); }} />}
            {detalhe && <OSDetailModal id={detalhe} modo={modo} onClose={() => setDetalhe(null)} onChanged={carregar} />}
            {produtosModal && <ProdutosModal onClose={() => setProdutosModal(false)} />}
        </div>
    );
};

export default ProteseView;
