import React, { useState, useEffect, useCallback } from 'react';
import { FlaskConical, Wallet, Clock, AlertTriangle, CheckCircle2, RefreshCw, Inbox } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { PageHeader } from '../components/PageHeader.tsx';

const fmtBRL = (v: number) => 'R$ ' + Number(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2 });

// Painel do LABORATÓRIO (protético): aparece quando o workspace ativo é tipo='laboratorio'.
// Resumo a partir do que já existe — a Bancada (OS) + o financeiro do workspace do lab.
export const LabHomeView: React.FC = () => {
  const ws: any = HybridBackend.getActiveWorkspace();
  const [os, setOs] = useState<any[]>([]);
  const [fin, setFin] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  const carregar = useCallback(async () => {
    setLoading(true);
    try {
      const [b, f] = await Promise.all([HybridBackend.getProteseBancada(), HybridBackend.getFinanceiro()]);
      setOs(Array.isArray(b) ? b : []);
      setFin(Array.isArray(f) ? f : []);
    } catch { /* silent */ } finally { setLoading(false); }
  }, []);
  useEffect(() => { carregar(); }, [carregar]);

  const ativas = os.filter(o => o.status !== 'entregue' && o.status !== 'cancelado');
  const atrasadas = os.filter(o => o.atrasada).length;
  const ymMes = new Date().toISOString().slice(0, 7);
  const entreguesMes = os.filter(o => o.status === 'entregue' && (o.updated_at || '').slice(0, 7) === ymMes).length;
  // Faturamento do mês: RECEITA de prótese lançada no workspace do lab (espelho da entrega).
  const fatMes = fin
    .filter(l => l.origem === 'protese' && (l.data_competencia || l.datavencimento || '').slice(0, 7) === ymMes)
    .reduce((s, l) => s + Number(l.valor || 0), 0);

  const KPI: React.FC<{ titulo: string; valor: string; cor: string; Icon: any; sub?: string }> = ({ titulo, valor, cor, Icon, sub }) => (
    <div className="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm relative overflow-hidden">
      <div className="absolute top-0 right-0 p-3 opacity-10"><Icon size={56} className={cor} /></div>
      <h4 className="text-[10px] font-black text-gray-400 uppercase tracking-widest">{titulo}</h4>
      <div className="mt-2 text-xl font-black text-gray-900">{valor}</div>
      {sub && <p className="mt-2 text-[10px] font-bold text-gray-400 uppercase">{sub}</p>}
    </div>
  );

  // Distribuição por status (fila de produção).
  const STATUS_ORD = ['solicitado', 'recebido', 'producao', 'prova', 'ajuste', 'finalizado'];
  const STATUS_LABEL: Record<string, string> = { solicitado: 'Solicitado', recebido: 'Recebido', producao: 'Produção', prova: 'Prova', ajuste: 'Ajuste', finalizado: 'Finalizado' };
  const porStatus = STATUS_ORD.map(s => ({ s, n: ativas.filter(o => o.status === s).length })).filter(x => x.n > 0);

  return (
    <div className="space-y-6 pb-10">
      <PageHeader title="PAINEL DO LABORATÓRIO">
        <button onClick={carregar} className="bg-white border border-gray-200 text-gray-600 p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2 text-xs font-bold transition-all shadow-sm">
          <RefreshCw size={16} /> <span className="hidden sm:inline">ATUALIZAR</span>
        </button>
      </PageHeader>

      <div className="bg-white rounded-2xl border border-gray-100 shadow-sm px-6 py-4 flex items-center gap-3">
        <div className="w-10 h-10 rounded-xl flex items-center justify-center text-white shrink-0" style={{ backgroundColor: '#2d6a4f' }}><FlaskConical size={20} /></div>
        <div className="min-w-0">
          <p className="font-black text-gray-900 uppercase truncate">{ws?.nome || 'Laboratório'}</p>
          <p className="text-[11px] text-gray-400 font-bold uppercase">Área de gestão do protético</p>
        </div>
      </div>

      {loading ? <div className="flex justify-center py-16"><RefreshCw className="animate-spin text-teal-600" size={28} /></div> : (
        <>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <KPI titulo="Na bancada" valor={String(ativas.length)} cor="text-teal-600" Icon={Inbox} sub="OS em produção" />
            <KPI titulo="Atrasadas" valor={String(atrasadas)} cor="text-red-500" Icon={AlertTriangle} sub="Prazo vencido" />
            <KPI titulo="Entregues no mês" valor={String(entreguesMes)} cor="text-green-600" Icon={CheckCircle2} sub="Concluídas" />
            <KPI titulo="Faturamento do mês" valor={fmtBRL(fatMes)} cor="text-violet-600" Icon={Wallet} sub="Receita de prótese" />
          </div>

          {/* Fila por status */}
          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-2">
              <Clock size={16} className="text-teal-600" />
              <h3 className="text-sm font-black text-gray-800 uppercase">Fila de produção</h3>
            </div>
            {porStatus.length === 0 ? (
              <div className="py-12 text-center text-gray-400 text-sm font-bold uppercase">Nenhuma OS em produção.</div>
            ) : (
              <div className="p-4 flex flex-wrap gap-3">
                {porStatus.map(({ s, n }) => (
                  <div key={s} className="px-4 py-3 rounded-xl bg-gray-50 border border-gray-100 min-w-[120px]">
                    <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">{STATUS_LABEL[s]}</p>
                    <p className="text-2xl font-black text-gray-800">{n}</p>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Próximas entregas */}
          <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
              <h3 className="text-sm font-black text-gray-800 uppercase">Próximas entregas</h3>
            </div>
            {ativas.filter(o => o.prazo_entrega).length === 0 ? (
              <div className="py-10 text-center text-gray-400 text-sm font-bold uppercase">Sem prazos agendados.</div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs">
                  <thead className="bg-gray-50/60"><tr>{['Paciente', 'Tipo', 'Prazo', 'Status', 'Valor'].map(h => <th key={h} className="px-4 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">{h}</th>)}</tr></thead>
                  <tbody className="divide-y divide-gray-100">
                    {ativas.filter(o => o.prazo_entrega).sort((a, b) => (a.prazo_entrega || '').localeCompare(b.prazo_entrega || '')).slice(0, 12).map(o => (
                      <tr key={o.id} className={`hover:bg-gray-50/50 ${o.atrasada ? 'bg-red-50/40' : ''}`}>
                        <td className="px-4 py-3 font-bold text-gray-700 uppercase">{o.paciente_nome || '—'}</td>
                        <td className="px-4 py-3 text-gray-500 uppercase">{o.tipo || '—'}</td>
                        <td className={`px-4 py-3 whitespace-nowrap font-bold ${o.atrasada ? 'text-red-600' : 'text-gray-500'}`}>{(o.prazo_entrega || '').slice(0, 10).split('-').reverse().join('/')}</td>
                        <td className="px-4 py-3"><span className="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-teal-100 text-teal-700">{STATUS_LABEL[o.status] || o.status}</span></td>
                        <td className="px-4 py-3 font-black text-gray-800">{fmtBRL(o.custo)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
};