import React, { useState } from 'react';
import { Plus, Search, FileText, Pencil, Printer, Trash2, Loader2 } from 'lucide-react';
import { HybridBackend } from '../services/backend.ts';
import { Contrato } from '../types.ts';
import { useHybridBackend } from '../hooks/useHybridBackend.ts';
import { useToast } from '../contexts/ToastContext.tsx';
import { PageHeader } from '../components/PageHeader.tsx';
import { ContratoModal } from './ContratoModal.tsx';

type StatusFilter = 'TODOS' | 'Ativo' | 'Rascunho' | 'Assinado' | 'Encerrado';

const STATUS_TABS: StatusFilter[] = ['TODOS', 'Ativo', 'Rascunho', 'Assinado', 'Encerrado'];

const STATUS_COLORS: Record<string, string> = {
  Ativo: 'bg-green-100 text-green-700',
  Rascunho: 'bg-amber-100 text-amber-700',
  Assinado: 'bg-blue-100 text-blue-700',
  Encerrado: 'bg-gray-100 text-gray-600',
};

const fmt = (v: number) => v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });

export const ContratosView: React.FC = () => {
  const toast = useToast();
  const { data: contratos, isLoading, refresh } = useHybridBackend<Contrato[]>(HybridBackend.getContratos);
  const list = contratos ?? [];

  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('TODOS');
  const [modalOpen, setModalOpen] = useState(false);
  const [editContrato, setEditContrato] = useState<Contrato | null>(null);
  const [printContrato, setPrintContrato] = useState<Contrato | null>(null);

  const filtered = list.filter(c => {
    const matchSearch = !search.trim() ||
      c.pacienteNome.toLowerCase().includes(search.toLowerCase()) ||
      c.titulo.toLowerCase().includes(search.toLowerCase());
    const matchStatus = statusFilter === 'TODOS' || c.status === statusFilter;
    return matchSearch && matchStatus;
  });

  const stats = {
    total: list.length,
    ativos: list.filter(c => c.status === 'Ativo').length,
    rascunhos: list.filter(c => c.status === 'Rascunho').length,
    encerrados: list.filter(c => c.status === 'Encerrado' || c.status === 'Assinado').length,
  };

  const handleDelete = async (id: string, nome: string) => {
    if (!confirm(`EXCLUIR o contrato de ${nome}?`)) return;
    try {
      await HybridBackend.deleteContrato(id);
      toast.success('CONTRATO EXCLUÍDO.');
      refresh();
    } catch {
      toast.error('ERRO AO EXCLUIR CONTRATO.');
    }
  };

  const openNew = () => { setEditContrato(null); setModalOpen(true); };
  const openEdit = (c: Contrato) => { setEditContrato(c); setModalOpen(true); };
  const openPrint = (c: Contrato) => { setPrintContrato(c); setModalOpen(true); };

  return (
    <div className="h-full flex flex-col">
      <PageHeader title="CONTRATOS" description="Gestão de contratos de serviços odontológicos">
        <button
          onClick={openNew}
          className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors uppercase font-bold text-sm shadow-sm"
        >
          <Plus size={18} /> NOVO CONTRATO
        </button>
      </PageHeader>

      {/* Stats bar */}
      <div className="grid grid-cols-4 gap-3 mb-4">
        {[
          { label: 'Total', value: stats.total, color: 'bg-indigo-50 text-indigo-700' },
          { label: 'Ativos', value: stats.ativos, color: 'bg-green-50 text-green-700' },
          { label: 'Rascunhos', value: stats.rascunhos, color: 'bg-amber-50 text-amber-700' },
          { label: 'Encerrados/Assinados', value: stats.encerrados, color: 'bg-gray-50 text-gray-600' },
        ].map(s => (
          <div key={s.label} className={`${s.color} rounded-xl p-3 text-center`}>
            <p className="text-2xl font-black">{s.value}</p>
            <p className="text-[10px] font-bold uppercase opacity-70">{s.label}</p>
          </div>
        ))}
      </div>

      {/* Search + status filters */}
      <div className="flex flex-col sm:flex-row gap-3 mb-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" size={16} />
          <input
            type="text"
            placeholder="Buscar por paciente ou título..."
            className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-100 focus:border-indigo-300 outline-none bg-white"
            value={search}
            onChange={e => setSearch(e.target.value)}
          />
        </div>
        <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1 overflow-x-auto">
          {STATUS_TABS.map(s => (
            <button
              key={s}
              onClick={() => setStatusFilter(s)}
              className={`px-2.5 py-1 rounded-md text-[11px] font-bold transition-all whitespace-nowrap ${statusFilter === s ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
            >
              {s}
            </button>
          ))}
        </div>
      </div>

      {/* Loading */}
      {isLoading && (
        <div className="flex-1 flex items-center justify-center">
          <Loader2 className="animate-spin text-indigo-400" size={32} />
        </div>
      )}

      {/* Empty state */}
      {!isLoading && filtered.length === 0 && (
        <div className="flex-1 flex flex-col items-center justify-center text-gray-400 py-20">
          <FileText size={48} className="mb-4 opacity-30" />
          <p className="text-sm font-bold uppercase">Nenhum contrato encontrado</p>
          <p className="text-xs mt-1">{search || statusFilter !== 'TODOS' ? 'Tente limpar os filtros.' : 'Clique em "NOVO CONTRATO" para começar.'}</p>
          {!search && statusFilter === 'TODOS' && (
            <button
              onClick={openNew}
              className="mt-4 flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-bold transition-colors"
            >
              <Plus size={16} /> Criar Primeiro Contrato
            </button>
          )}
        </div>
      )}

      {/* Grid */}
      {!isLoading && filtered.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto pb-6">
          {filtered.map(c => (
            <div key={c.id} className="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 flex flex-col">
              <div className="p-4 flex-1">
                {/* Header row */}
                <div className="flex items-start justify-between gap-2 mb-2">
                  <h3 className="font-black text-gray-800 text-sm uppercase leading-tight flex-1">{c.pacienteNome}</h3>
                  <span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase flex-shrink-0 ${STATUS_COLORS[c.status] || 'bg-gray-100 text-gray-600'}`}>
                    {c.status}
                  </span>
                </div>

                <p className="text-[11px] text-gray-500 font-medium uppercase truncate mb-2">{c.titulo}</p>

                <div className="flex flex-wrap gap-1 mb-3">
                  {c.especialidadeNome && (
                    <span className="bg-indigo-50 text-indigo-600 text-[9px] font-bold px-2 py-0.5 rounded-full uppercase">
                      {c.especialidadeNome}
                    </span>
                  )}
                  {c.dentistaNome && (
                    <span className="bg-gray-50 text-gray-500 text-[9px] font-bold px-2 py-0.5 rounded-full uppercase">
                      {c.dentistaNome}
                    </span>
                  )}
                </div>

                <div className="grid grid-cols-2 gap-2 text-[10px]">
                  <div>
                    <span className="text-gray-400 font-bold uppercase block">Valor Total</span>
                    <span className="font-black text-indigo-700 text-sm">{fmt(c.valorTotal)}</span>
                  </div>
                  <div>
                    <span className="text-gray-400 font-bold uppercase block">Itens</span>
                    <span className="font-bold text-gray-700">{c.items?.length ?? 0} proc.</span>
                  </div>
                  {c.dataInicio && (
                    <div>
                      <span className="text-gray-400 font-bold uppercase block">Início</span>
                      <span className="font-bold text-gray-700">
                        {new Date(c.dataInicio + 'T12:00').toLocaleDateString('pt-BR')}
                      </span>
                    </div>
                  )}
                  {c.dataFim && (
                    <div>
                      <span className="text-gray-400 font-bold uppercase block">Fim</span>
                      <span className="font-bold text-gray-700">
                        {new Date(c.dataFim + 'T12:00').toLocaleDateString('pt-BR')}
                      </span>
                    </div>
                  )}
                </div>
              </div>

              {/* Actions */}
              <div className="flex border-t border-gray-100">
                <button
                  onClick={() => openEdit(c)}
                  className="flex-1 flex items-center justify-center gap-1.5 py-2 text-indigo-600 hover:bg-indigo-50 rounded-bl-xl text-[10px] font-bold transition-colors uppercase"
                >
                  <Pencil size={12} /> Editar
                </button>
                <div className="border-l border-gray-100" />
                <button
                  onClick={() => openPrint(c)}
                  className="flex-1 flex items-center justify-center gap-1.5 py-2 text-gray-600 hover:bg-gray-50 text-[10px] font-bold transition-colors uppercase"
                >
                  <Printer size={12} /> Imprimir
                </button>
                <div className="border-l border-gray-100" />
                <button
                  onClick={() => handleDelete(c.id, c.pacienteNome)}
                  className="flex-1 flex items-center justify-center gap-1.5 py-2 text-red-500 hover:bg-red-50 rounded-br-xl text-[10px] font-bold transition-colors uppercase"
                >
                  <Trash2 size={12} /> Excluir
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Modal */}
      {modalOpen && (
        <ContratoModal
          contrato={editContrato}
          onClose={() => { setModalOpen(false); setEditContrato(null); setPrintContrato(null); }}
          onSaved={refresh}
        />
      )}
    </div>
  );
};