"use client";

import {
  Calendar,
  ChevronLeft,
  ChevronRight,
  Eye,
  FileCheck,
  FileSignature,
  FileText,
  Filter,
  Pencil,
  Plus,
  Printer,
  RefreshCw,
  Search,
  Trash2,
} from "lucide-react";
import { useState } from "react";
import { ContractDetailModal } from "@/components/contracts/contract-detail-modal";
import { ContractFormModal } from "@/components/contracts/contract-form-modal";
import { ContractStatsCards } from "@/components/contracts/contract-stats-cards";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { useContracts } from "@/hooks/use-contracts";
import { currency, formatDate } from "@/lib/utils";
import { Contract, ContractStatus } from "@/types/contract";

export default function ContratosPage() {
  const {
    contracts,
    customers,
    stats,
    totalItems,
    totalPages,
    currentPage,
    filters,
    isLoading,
    isSaving,
    selectedContract,
    setSelectedContract,
    setSearch,
    setStatusFilter,
    setCustomerFilter,
    setPage,
    loadData,
    loadContractDetails,
    createContract,
    updateContract,
    deleteContract,
  } = useContracts();

  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
  const [contractToEdit, setContractToEdit] = useState<Contract | null>(null);
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);

  const handleOpenCreateModal = () => {
    setContractToEdit(null);
    setIsFormModalOpen(true);
  };

  const handleOpenEditModal = (contract: Contract) => {
    setContractToEdit(contract);
    setIsFormModalOpen(true);
  };

  const handleOpenDetailModal = async (contract: Contract) => {
    setIsDetailModalOpen(true);
    await loadContractDetails(contract.id);
  };

  const handleFormSubmit = async (data: any) => {
    if (contractToEdit) {
      await updateContract(contractToEdit.id, data);
    } else {
      await createContract(data);
    }
  };

  const renderStatusBadge = (status: ContractStatus) => {
    switch (status) {
      case "SIGNED":
        return <Badge tone="green">Assinado & Vigente</Badge>;
      case "PENDING_SIGNATURE":
        return <Badge tone="blue">Aguardando Assinatura</Badge>;
      case "DRAFT":
        return <Badge tone="blue">Minuta (Rascunho)</Badge>;
      case "EXPIRED":
        return <Badge tone="red">Expirado</Badge>;
      case "TERMINATED":
        return <Badge tone="red">Encerrado</Badge>;
      default:
        return <Badge tone="blue">{status}</Badge>;
    }
  };

  return (
    <div className="space-y-6">
      {/* Header com Título e Ação */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <p className="text-sm font-medium text-muted-foreground">Dashboard / Jurídico & Comercial</p>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Gestão de Minutas & Contratos
          </h1>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="secondary" size="icon" onClick={() => loadData()} title="Atualizar dados">
            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
          </Button>
          <Button onClick={handleOpenCreateModal} className="shadow-xs">
            <Plus className="mr-1.5 h-4 w-4" /> Novo Contrato
          </Button>
        </div>
      </div>

      {/* Cartões de Estatísticas / KPIs */}
      <ContractStatsCards
        stats={stats}
        activeFilter={filters.status || "ALL"}
        onFilterClick={(statusKey) => setStatusFilter(statusKey as any)}
      />

      {/* Painel Principal com Tabela e Filtros */}
      <Card className="overflow-hidden shadow-xs border">
        {/* Barra de Busca e Filtros Avançados */}
        <div className="flex flex-col gap-4 border-b bg-card p-4 lg:flex-row lg:items-center lg:justify-between">
          <div className="relative flex-1 max-w-md">
            <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input
              value={filters.search || ""}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
              placeholder="Buscar por número do contrato, título ou cliente..."
            />
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {/* Filtro por Cliente */}
            <select
              value={filters.customerId || "ALL"}
              onChange={(e) => setCustomerFilter(e.target.value)}
              className="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring max-w-[200px]"
            >
              <option value="ALL">Todos os Clientes</option>
              {customers.map((cust) => (
                <option key={cust.id} value={cust.id}>
                  {cust.name}
                </option>
              ))}
            </select>

            {/* Filtro por Status */}
            <select
              value={filters.status || "ALL"}
              onChange={(e) => setStatusFilter(e.target.value as any)}
              className="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring"
            >
              <option value="ALL">Todos os Status</option>
              <option value="SIGNED">Assinados & Vigentes</option>
              <option value="PENDING_SIGNATURE">Aguardando Assinatura</option>
              <option value="DRAFT">Rascunhos (Minutas)</option>
              <option value="EXPIRED">Expirados</option>
              <option value="TERMINATED">Encerrados</option>
            </select>
          </div>
        </div>

        {/* Tabela de Contratos */}
        <div className="overflow-x-auto">
          <table className="w-full min-w-[850px] text-left text-sm">
            <thead className="bg-muted/50 text-xs uppercase text-muted-foreground">
              <tr>
                <th className="px-4 py-3.5 font-medium">Contrato / Código</th>
                <th className="px-4 py-3.5 font-medium">Cliente</th>
                <th className="px-4 py-3.5 font-medium">Vigência</th>
                <th className="px-4 py-3.5 font-medium">Valor Contratado</th>
                <th className="px-4 py-3.5 font-medium">Status</th>
                <th className="w-16 px-4 py-3.5 text-right font-medium">Ações</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {isLoading ? (
                <tr>
                  <td colSpan={6} className="p-8 text-center text-muted-foreground">
                    <RefreshCw className="mx-auto h-6 w-6 animate-spin text-primary" />
                    <p className="mt-2 text-xs">Carregando contratos e minutas...</p>
                  </td>
                </tr>
              ) : contracts.length === 0 ? (
                <tr>
                  <td colSpan={6} className="p-12 text-center">
                    <FileText className="mx-auto h-10 w-10 text-muted-foreground/40" />
                    <h3 className="mt-3 text-base font-semibold">Nenhum contrato encontrado</h3>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Elabore seu primeiro contrato ou minuta de locação industrial.
                    </p>
                    <Button onClick={handleOpenCreateModal} variant="secondary" className="mt-4">
                      <Plus className="mr-1.5 h-4 w-4" /> Elaborar Contrato
                    </Button>
                  </td>
                </tr>
              ) : (
                contracts.map((contract) => (
                  <tr key={contract.id} className="group transition-colors hover:bg-muted/40">
                    <td className="px-4 py-3.5">
                      <div className="flex items-center gap-3">
                        <div className="rounded-lg border bg-background p-2 group-hover:border-primary/40 transition-colors">
                          <FileCheck className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p
                            onClick={() => handleOpenDetailModal(contract)}
                            className="font-bold text-foreground font-mono hover:text-primary hover:underline cursor-pointer"
                          >
                            {contract.code}
                          </p>
                          <p className="text-xs text-muted-foreground truncate max-w-[220px]">
                            {contract.title}
                          </p>
                        </div>
                      </div>
                    </td>

                    <td className="px-4 py-3.5">
                      <p className="font-semibold text-foreground">
                        {contract.customer?.name || "Cliente não informado"}
                      </p>
                      {contract.customer?.document && (
                        <p className="text-xs text-muted-foreground font-mono">
                          {contract.customer.document}
                        </p>
                      )}
                    </td>

                    <td className="px-4 py-3.5 text-xs text-muted-foreground">
                      <p className="font-medium text-foreground">
                        {formatDate(contract.startDate)} até {formatDate(contract.endDate)}
                      </p>
                      {contract.signedAt && (
                        <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-0.5">
                          Assinado em: {new Date(contract.signedAt).toLocaleDateString("pt-BR")}
                        </p>
                      )}
                    </td>

                    <td className="px-4 py-3.5 font-bold text-foreground">
                      {currency(contract.value)}
                    </td>

                    <td className="px-4 py-3.5">{renderStatusBadge(contract.status)}</td>

                    <td className="px-4 py-3.5 text-right">
                      <div className="flex items-center justify-end gap-1">
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleOpenDetailModal(contract)}
                          title="Ver Minuta e Cláusulas"
                        >
                          <Eye className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleOpenEditModal(contract)}
                          title="Editar"
                        >
                          <Pencil className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => {
                            if (confirm(`Tem certeza que deseja excluir o contrato ${contract.code}?`)) {
                              deleteContract(contract.id);
                            }
                          }}
                          title="Excluir"
                          className="text-rose-500 hover:bg-rose-500/10 hover:text-rose-600"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Paginação */}
        <div className="flex flex-col gap-3 border-t px-4 py-3.5 sm:flex-row sm:items-center sm:justify-between text-xs text-muted-foreground">
          <span>
            Exibindo {contracts.length} de {totalItems} contratos
          </span>

          <div className="flex items-center gap-2">
            <span className="mr-2">
              Página {currentPage} de {totalPages}
            </span>
            <Button
              variant="secondary"
              size="sm"
              disabled={currentPage <= 1 || isLoading}
              onClick={() => setPage(currentPage - 1)}
            >
              <ChevronLeft className="h-4 w-4 mr-1" /> Anterior
            </Button>
            <Button
              variant="secondary"
              size="sm"
              disabled={currentPage >= totalPages || isLoading}
              onClick={() => setPage(currentPage + 1)}
            >
              Próxima <ChevronRight className="h-4 w-4 ml-1" />
            </Button>
          </div>
        </div>
      </Card>

      {/* Modal de Formulário (Novo / Editar) */}
      <ContractFormModal
        isOpen={isFormModalOpen}
        onClose={() => setIsFormModalOpen(false)}
        onSubmit={handleFormSubmit}
        contractToEdit={contractToEdit}
        customers={customers}
        isSaving={isSaving}
      />

      {/* Modal de Detalhes da Minuta / Contrato */}
      <ContractDetailModal
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        contract={selectedContract}
        onEdit={(ctr) => {
          setIsDetailModalOpen(false);
          handleOpenEditModal(ctr);
        }}
        onDelete={(id) => deleteContract(id)}
        onSignContract={async (id) => {
          await updateContract(id, { status: "SIGNED" } as any);
          setIsDetailModalOpen(false);
        }}
      />
    </div>
  );
}