"use client";

import {
  AlertTriangle,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Clock,
  Eye,
  Filter,
  Package,
  Pencil,
  Plus,
  RefreshCw,
  Search,
  Tag,
  Trash2,
  Truck,
  Wrench,
} from "lucide-react";
import { useState } from "react";
import { EquipmentDetailModal } from "@/components/equipment/equipment-detail-modal";
import { EquipmentFormModal } from "@/components/equipment/equipment-form-modal";
import { EquipmentStatsCards } from "@/components/equipment/equipment-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 { useEquipment } from "@/hooks/use-equipment";
import { currency } from "@/lib/utils";
import { Equipment, EquipmentStatus } from "@/types/equipment";

export default function EquipamentosPage() {
  const {
    equipmentList,
    categories,
    stats,
    totalItems,
    totalPages,
    currentPage,
    filters,
    isLoading,
    isSaving,
    selectedEquipment,
    setSelectedEquipment,
    setSearch,
    setStatusFilter,
    setCategoryFilter,
    setPage,
    loadData,
    loadEquipmentDetails,
    createEquipment,
    updateEquipment,
    deleteEquipment,
    toggleStatus,
  } = useEquipment();

  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
  const [equipmentToEdit, setEquipmentToEdit] = useState<Equipment | null>(null);
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);

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

  const handleOpenEditModal = (equip: Equipment) => {
    setEquipmentToEdit(equip);
    setIsFormModalOpen(true);
  };

  const handleOpenDetailModal = async (equip: Equipment) => {
    setIsDetailModalOpen(true);
    await loadEquipmentDetails(equip.id);
  };

  const handleFormSubmit = async (data: any) => {
    if (equipmentToEdit) {
      await updateEquipment(equipmentToEdit.id, data);
    } else {
      await createEquipment(data);
    }
  };

  const renderStatusBadge = (status: EquipmentStatus) => {
    switch (status) {
      case "AVAILABLE":
        return <Badge tone="green">Disponível</Badge>;
      case "RENTED":
        return <Badge tone="blue">Locado</Badge>;
      case "MAINTENANCE":
        return <Badge tone="red">Em Manutenção</Badge>;
      case "RESERVED":
        return <Badge tone="blue">Reservado</Badge>;
      case "INACTIVE":
        return <Badge tone="red">Inativo</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 / Ativos</p>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Gestão de Equipamentos
          </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 Equipamento
          </Button>
        </div>
      </div>

      {/* Cartões de Estatísticas / KPIs da Frota */}
      <EquipmentStatsCards
        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, patrimônio, marca, modelo..."
            />
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {/* Filtro de Categoria */}
            <select
              value={filters.categoryId || "ALL"}
              onChange={(e) => setCategoryFilter(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"
            >
              <option value="ALL">Todas as Categorias</option>
              {categories.map((cat) => (
                <option key={cat.id} value={cat.id}>
                  {cat.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="AVAILABLE">Disponível</option>
              <option value="RENTED">Locado</option>
              <option value="MAINTENANCE">Em Manutenção</option>
              <option value="RESERVED">Reservado</option>
              <option value="INACTIVE">Inativo</option>
            </select>
          </div>
        </div>

        {/* Tabela de Equipamentos */}
        <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 / Patrimônio</th>
                <th className="px-4 py-3.5 font-medium">Marca / Modelo</th>
                <th className="px-4 py-3.5 font-medium">Categoria</th>
                <th className="px-4 py-3.5 font-medium">Diária (R$)</th>
                <th className="px-4 py-3.5 font-medium">Horímetro</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={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 equipamentos...</p>
                  </td>
                </tr>
              ) : equipmentList.length === 0 ? (
                <tr>
                  <td colSpan={7} className="p-12 text-center">
                    <Package className="mx-auto h-10 w-10 text-muted-foreground/40" />
                    <h3 className="mt-3 text-base font-semibold">Nenhum equipamento encontrado</h3>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Tente ajustar os filtros ou cadastre um novo equipamento no sistema.
                    </p>
                    <Button onClick={handleOpenCreateModal} variant="secondary" className="mt-4">
                      <Plus className="mr-1.5 h-4 w-4" /> Cadastrar Equipamento
                    </Button>
                  </td>
                </tr>
              ) : (
                equipmentList.map((equip) => (
                  <tr
                    key={equip.id}
                    className="group transition-colors hover:bg-muted/40"
                  >
                    {/* Código & Patrimônio */}
                    <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">
                          <Package className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p
                            onClick={() => handleOpenDetailModal(equip)}
                            className="font-medium text-foreground hover:text-primary hover:underline cursor-pointer font-mono"
                          >
                            {equip.code}
                          </p>
                          <p className="text-xs text-muted-foreground font-mono">
                            Pat: {equip.assetTag}
                          </p>
                        </div>
                      </div>
                    </td>

                    {/* Marca / Modelo */}
                    <td className="px-4 py-3.5">
                      <p className="font-medium text-foreground">
                        {equip.brand} {equip.model}
                      </p>
                      {equip.year && (
                        <p className="text-xs text-muted-foreground">Ano: {equip.year}</p>
                      )}
                    </td>

                    {/* Categoria */}
                    <td className="px-4 py-3.5 text-xs">
                      {equip.category ? (
                        <span className="inline-flex items-center gap-1.5 rounded-full border bg-muted/60 px-2.5 py-1 text-xs font-medium text-foreground">
                          <span
                            className="h-2 w-2 rounded-full"
                            style={{ backgroundColor: equip.category.color || "#2563eb" }}
                          />
                          {equip.category.name}
                        </span>
                      ) : (
                        <span className="text-muted-foreground">Sem categoria</span>
                      )}
                    </td>

                    {/* Diária */}
                    <td className="px-4 py-3.5 font-medium text-foreground">
                      {currency(equip.dailyRate)}
                    </td>

                    {/* Horímetro */}
                    <td className="px-4 py-3.5 text-xs text-muted-foreground">
                      {equip.hourMeter ? (
                        <span className="flex items-center gap-1 font-medium text-foreground">
                          <Clock className="h-3.5 w-3.5 text-amber-500" />
                          {equip.hourMeter} h
                        </span>
                      ) : (
                        <span className="italic text-muted-foreground/60">Não registrado</span>
                      )}
                    </td>

                    {/* Status */}
                    <td className="px-4 py-3.5">{renderStatusBadge(equip.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(equip)}
                          title="Ver Ficha Técnica"
                        >
                          <Eye className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleOpenEditModal(equip)}
                          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 equipamento ${equip.code}?`
                              )
                            ) {
                              deleteEquipment(equip.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>

        {/* Rodapé da Tabela com 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 {equipmentList.length} de {totalItems} equipamentos cadastrados
          </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) */}
      <EquipmentFormModal
        isOpen={isFormModalOpen}
        onClose={() => setIsFormModalOpen(false)}
        onSubmit={handleFormSubmit}
        equipmentToEdit={equipmentToEdit}
        categories={categories}
        isSaving={isSaving}
      />

      {/* Modal de Detalhes do Equipamento */}
      <EquipmentDetailModal
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        equipment={selectedEquipment}
        onEdit={(equip) => {
          setIsDetailModalOpen(false);
          handleOpenEditModal(equip);
        }}
        onDelete={(id) => deleteEquipment(id)}
        onToggleStatus={(id, st) => toggleStatus(id, st)}
      />
    </div>
  );
}