"use client";

import {
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Clock,
  Eye,
  Package,
  Pencil,
  Plus,
  RefreshCw,
  Search,
  Trash2,
  Wrench,
} from "lucide-react";
import { useState } from "react";
import { MaintenanceDetailModal } from "@/components/maintenance/maintenance-detail-modal";
import { MaintenanceFormModal } from "@/components/maintenance/maintenance-form-modal";
import { MaintenanceStatsCards } from "@/components/maintenance/maintenance-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 { useMaintenance } from "@/hooks/use-maintenance";
import { currency } from "@/lib/utils";
import { MaintenanceStatus, ServiceOrder } from "@/types/maintenance";

export default function ManutencoesPage() {
  const {
    serviceOrders,
    equipmentList,
    suppliersList,
    stats,
    totalItems,
    totalPages,
    currentPage,
    filters,
    isLoading,
    isSaving,
    selectedServiceOrder,
    setSelectedServiceOrder,
    setSearch,
    setStatusFilter,
    setEquipmentFilter,
    setPage,
    loadData,
    loadServiceOrderDetails,
    createServiceOrder,
    updateServiceOrder,
    deleteServiceOrder,
  } = useMaintenance();

  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
  const [serviceOrderToEdit, setServiceOrderToEdit] = useState<ServiceOrder | null>(null);
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);

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

  const handleOpenEditModal = (so: ServiceOrder) => {
    setServiceOrderToEdit(so);
    setIsFormModalOpen(true);
  };

  const handleOpenDetailModal = async (so: ServiceOrder) => {
    setIsDetailModalOpen(true);
    await loadServiceOrderDetails(so.id);
  };

  const handleFormSubmit = async (data: any) => {
    if (serviceOrderToEdit) {
      await updateServiceOrder(serviceOrderToEdit.id, data);
    } else {
      await createServiceOrder(data);
    }
  };

  const handleStatusChange = async (id: string, status: MaintenanceStatus) => {
    await updateServiceOrder(id, { status });
  };

  const renderStatusBadge = (status: MaintenanceStatus) => {
    switch (status) {
      case "OPEN":
        return <Badge tone="blue">Aberta</Badge>;
      case "IN_PROGRESS":
        return <Badge tone="blue">Em Andamento</Badge>;
      case "DONE":
        return <Badge tone="green">Concluída</Badge>;
      case "CANCELED":
        return <Badge tone="red">Cancelada</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 / Oficina & Operações</p>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Gestão de Manutenções e Ordens de Serviço
          </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" /> Nova Ordem de Serviço
          </Button>
        </div>
      </div>

      {/* Cartões de Estatísticas / KPIs */}
      <MaintenanceStatsCards
        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 código da OS, título, máquina ou marca..."
            />
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {/* Filtro por Equipamento */}
            <select
              value={filters.equipmentId || "ALL"}
              onChange={(e) => setEquipmentFilter(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">Todas as Máquinas</option>
              {equipmentList.map((eq) => (
                <option key={eq.id} value={eq.id}>
                  {eq.code} - {eq.model}
                </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="OPEN">Abertas</option>
              <option value="IN_PROGRESS">Em Andamento</option>
              <option value="DONE">Concluídas</option>
              <option value="CANCELED">Canceladas</option>
            </select>
          </div>
        </div>

        {/* Tabela de Ordens de Serviço */}
        <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">Código OS</th>
                <th className="px-4 py-3.5 font-medium">Equipamento</th>
                <th className="px-4 py-3.5 font-medium">Título da Manutenção</th>
                <th className="px-4 py-3.5 font-medium">Data de Abertura</th>
                <th className="px-4 py-3.5 font-medium">Custo (R$)</th>
                <th className="px-4 py-3.5 font-medium">Status</th>
                <th className="w-24 px-4 py-3.5 text-right font-medium">Ações</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {isLoading ? (
                <tr>
                  <td colSpan={7} 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 ordens de serviço...</p>
                  </td>
                </tr>
              ) : serviceOrders.length === 0 ? (
                <tr>
                  <td colSpan={7} className="p-12 text-center">
                    <Wrench className="mx-auto h-10 w-10 text-muted-foreground/40" />
                    <h3 className="mt-3 text-base font-semibold">Nenhuma ordem de serviço encontrada</h3>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Tente ajustar os filtros ou crie uma nova OS de manutenção.
                    </p>
                    <Button onClick={handleOpenCreateModal} variant="secondary" className="mt-4">
                      <Plus className="mr-1.5 h-4 w-4" /> Abrir Ordem de Serviço
                    </Button>
                  </td>
                </tr>
              ) : (
                serviceOrders.map((so) => (
                  <tr key={so.id} className="group transition-colors hover:bg-muted/40">
                    {/* Código OS */}
                    <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">
                          <Wrench className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p
                            onClick={() => handleOpenDetailModal(so)}
                            className="font-bold text-foreground font-mono hover:text-primary hover:underline cursor-pointer"
                          >
                            {so.code}
                          </p>
                          <p className="text-xs text-muted-foreground">
                            {so.openedAt.split("T")[0]}
                          </p>
                        </div>
                      </div>
                    </td>

                    {/* Equipamento */}
                    <td className="px-4 py-3.5">
                      <p className="font-semibold text-foreground">
                        {so.equipment
                          ? `${so.equipment.brand} ${so.equipment.model}`
                          : "Máquina Industrial"}
                      </p>
                      <p className="text-xs text-muted-foreground font-mono">
                        {so.equipment?.code || "EQ-100"} ({so.equipment?.assetTag || "PAT-900"})
                      </p>
                    </td>

                    {/* Título e Descrição */}
                    <td className="px-4 py-3.5">
                      <p className="font-medium text-foreground line-clamp-1">{so.title}</p>
                      {so.description && (
                        <p className="text-xs text-muted-foreground line-clamp-1">
                          {so.description}
                        </p>
                      )}
                    </td>

                    {/* Data de Abertura */}
                    <td className="px-4 py-3.5 text-xs text-muted-foreground">
                      <p className="font-medium text-foreground">
                        {so.openedAt.split("T")[0]}
                      </p>
                      <p className="text-xs text-muted-foreground mt-0.5">
                        {so.closedAt ? `Fechada: ${so.closedAt.split("T")[0]}` : "Em aberto"}
                      </p>
                    </td>

                    {/* Custo */}
                    <td className="px-4 py-3.5 font-bold text-emerald-600 dark:text-emerald-400">
                      {currency(so.cost)}
                    </td>

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

                    {/* Ações */}
                    <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(so)}
                          title="Ver Detalhes"
                        >
                          <Eye className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleOpenEditModal(so)}
                          title="Editar OS"
                        >
                          <Pencil className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                        </Button>
                        {so.status !== "DONE" && so.status !== "CANCELED" && (
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleStatusChange(so.id, "DONE")}
                            title="Concluir OS"
                            className="text-emerald-600 hover:bg-emerald-500/10"
                          >
                            <CheckCircle2 className="h-4 w-4" />
                          </Button>
                        )}
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => {
                            if (confirm(`Tem certeza que deseja excluir a OS ${so.code}?`)) {
                              deleteServiceOrder(so.id);
                            }
                          }}
                          title="Excluir OS"
                          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 {serviceOrders.length} de {totalItems} ordens de serviço
          </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 (Nova / Editar OS) */}
      <MaintenanceFormModal
        isOpen={isFormModalOpen}
        onClose={() => setIsFormModalOpen(false)}
        onSubmit={handleFormSubmit}
        serviceOrderToEdit={serviceOrderToEdit}
        equipmentList={equipmentList}
        suppliersList={suppliersList}
        isSaving={isSaving}
      />

      {/* Modal de Detalhes da OS */}
      <MaintenanceDetailModal
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        serviceOrder={selectedServiceOrder}
        onEdit={(so) => {
          setIsDetailModalOpen(false);
          handleOpenEditModal(so);
        }}
        onDelete={(id) => deleteServiceOrder(id)}
        onStatusChange={(id, status) => handleStatusChange(id, status)}
      />
    </div>
  );
}