"use client";

import {
  BriefcaseBusiness,
  ChevronLeft,
  ChevronRight,
  Eye,
  Grid,
  Layers,
  List,
  Package,
  Pencil,
  Plus,
  RefreshCw,
  Search,
  Trash2,
} from "lucide-react";
import { useState } from "react";
import { CategoryDetailModal } from "@/components/categories/category-detail-modal";
import { CategoryFormModal } from "@/components/categories/category-form-modal";
import { CategoryStatsCards } from "@/components/categories/category-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 { useCategories } from "@/hooks/use-categories";
import { Category } from "@/types/category";

export default function CategoriasPage() {
  const {
    categories,
    stats,
    totalItems,
    totalPages,
    currentPage,
    filters,
    isLoading,
    isSaving,
    selectedCategory,
    setSelectedCategory,
    setSearch,
    setPage,
    loadData,
    loadCategoryDetails,
    createCategory,
    updateCategory,
    deleteCategory,
  } = useCategories();

  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
  const [isFormModalOpen, setIsFormModalOpen] = useState(false);
  const [categoryToEdit, setCategoryToEdit] = useState<Category | null>(null);
  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);

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

  const handleOpenEditModal = (cat: Category) => {
    setCategoryToEdit(cat);
    setIsFormModalOpen(true);
  };

  const handleOpenDetailModal = async (cat: Category) => {
    setIsDetailModalOpen(true);
    await loadCategoryDetails(cat.id);
  };

  const handleFormSubmit = async (data: any) => {
    if (categoryToEdit) {
      await updateCategory(categoryToEdit.id, data);
    } else {
      await createCategory(data);
    }
  };

  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 / Cadastros</p>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            Categorias 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" /> Nova Categoria
          </Button>
        </div>
      </div>

      {/* Cartões de Estatísticas / KPIs */}
      <CategoryStatsCards stats={stats} />

      {/* Controles de Busca & Alternância de Visualização */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between border-b pb-4">
        <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 categoria por nome ou descrição..."
          />
        </div>

        <div className="flex items-center gap-2">
          <div className="flex rounded-lg border bg-muted/50 p-1">
            <button
              onClick={() => setViewMode("grid")}
              className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition ${
                viewMode === "grid"
                  ? "bg-background text-foreground shadow-xs"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              <Grid className="h-3.5 w-3.5" /> Cards
            </button>
            <button
              onClick={() => setViewMode("table")}
              className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition ${
                viewMode === "table"
                  ? "bg-background text-foreground shadow-xs"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              <List className="h-3.5 w-3.5" /> Tabela
            </button>
          </div>
        </div>
      </div>

      {/* Conteúdo Principal (Grid / Tabela) */}
      {isLoading ? (
        <Card className="p-12 text-center text-muted-foreground">
          <RefreshCw className="mx-auto h-8 w-8 animate-spin text-primary" />
          <p className="mt-3 text-sm">Carregando categorias...</p>
        </Card>
      ) : categories.length === 0 ? (
        <Card className="p-12 text-center">
          <Layers className="mx-auto h-12 w-12 text-muted-foreground/40" />
          <h3 className="mt-4 text-lg font-semibold">Nenhuma categoria encontrada</h3>
          <p className="mt-1 text-sm text-muted-foreground">
            Crie sua primeira categoria para organizar sua frota de máquinas.
          </p>
          <Button onClick={handleOpenCreateModal} variant="secondary" className="mt-5">
            <Plus className="mr-1.5 h-4 w-4" /> Criar Categoria
          </Button>
        </Card>
      ) : viewMode === "grid" ? (
        /* Visualização em Grid de Cards */
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {categories.map((cat) => (
            <Card
              key={cat.id}
              className="group relative overflow-hidden p-5 transition-all duration-200 hover:shadow-md border"
            >
              <div
                className="absolute top-0 left-0 right-0 h-1.5"
                style={{ backgroundColor: cat.color || "#2563eb" }}
              />

              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div
                    className="flex h-10 w-10 items-center justify-center rounded-xl text-white font-bold shadow-xs shrink-0"
                    style={{ backgroundColor: cat.color || "#2563eb" }}
                  >
                    <BriefcaseBusiness className="h-5 w-5" />
                  </div>
                  <div>
                    <h3
                      onClick={() => handleOpenDetailModal(cat)}
                      className="font-bold text-lg text-foreground hover:text-primary hover:underline cursor-pointer"
                    >
                      {cat.name}
                    </h3>
                    <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5 font-medium">
                      <Package className="h-3.5 w-3.5 text-primary" />
                      {cat._count?.equipment || cat.equipment?.length || 0} equipamentos vinculados
                    </p>
                  </div>
                </div>
              </div>

              <p className="mt-4 text-xs text-muted-foreground line-clamp-2 leading-relaxed min-h-[36px]">
                {cat.description || "Nenhuma descrição informada."}
              </p>

              <div className="mt-5 flex items-center justify-between border-t pt-3">
                <span
                  className="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[11px] font-mono"
                >
                  <span
                    className="h-2 w-2 rounded-full"
                    style={{ backgroundColor: cat.color }}
                  />
                  {cat.color}
                </span>

                <div className="flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleOpenDetailModal(cat)}
                    title="Ver Detalhes"
                  >
                    <Eye className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleOpenEditModal(cat)}
                    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 a categoria ${cat.name}?`
                        )
                      ) {
                        deleteCategory(cat.id).catch((err) =>
                          alert(err.message || "Erro ao excluir categoria.")
                        );
                      }
                    }}
                    title="Excluir"
                    className="text-rose-500 hover:bg-rose-500/10 hover:text-rose-600"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </Card>
          ))}
        </div>
      ) : (
        /* Visualização em Tabela */
        <Card className="overflow-hidden shadow-xs border">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[700px] 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">Categoria</th>
                  <th className="px-4 py-3.5 font-medium">Descrição</th>
                  <th className="px-4 py-3.5 font-medium">Equipamentos</th>
                  <th className="px-4 py-3.5 font-medium">Cor</th>
                  <th className="w-16 px-4 py-3.5 text-right font-medium">Ações</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {categories.map((cat) => (
                  <tr key={cat.id} className="group transition-colors hover:bg-muted/40">
                    <td className="px-4 py-3.5">
                      <div className="flex items-center gap-3">
                        <span
                          className="h-3 w-3 rounded-full shrink-0"
                          style={{ backgroundColor: cat.color || "#2563eb" }}
                        />
                        <span
                          onClick={() => handleOpenDetailModal(cat)}
                          className="font-semibold text-foreground hover:text-primary hover:underline cursor-pointer"
                        >
                          {cat.name}
                        </span>
                      </div>
                    </td>
                    <td className="px-4 py-3.5 text-xs text-muted-foreground truncate max-w-[280px]">
                      {cat.description || "Sem descrição"}
                    </td>
                    <td className="px-4 py-3.5 text-xs font-semibold text-foreground">
                      {cat._count?.equipment || cat.equipment?.length || 0} ativos
                    </td>
                    <td className="px-4 py-3.5 font-mono text-xs text-muted-foreground">
                      {cat.color}
                    </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(cat)}
                          title="Ver Detalhes"
                        >
                          <Eye className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleOpenEditModal(cat)}
                          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 a categoria ${cat.name}?`
                              )
                            ) {
                              deleteCategory(cat.id).catch((err) =>
                                alert(err.message || "Erro ao excluir categoria.")
                              );
                            }
                          }}
                          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>
        </Card>
      )}

      {/* Paginação */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between border-t pt-4 text-xs text-muted-foreground">
          <span>
            Página {currentPage} de {totalPages} ({totalItems} categorias)
          </span>
          <div className="flex items-center gap-2">
            <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>
      )}

      {/* Modal de Formulário (Nova / Editar) */}
      <CategoryFormModal
        isOpen={isFormModalOpen}
        onClose={() => setIsFormModalOpen(false)}
        onSubmit={handleFormSubmit}
        categoryToEdit={categoryToEdit}
        isSaving={isSaving}
      />

      {/* Modal de Detalhes da Categoria */}
      <CategoryDetailModal
        isOpen={isDetailModalOpen}
        onClose={() => setIsDetailModalOpen(false)}
        category={selectedCategory}
        onEdit={(cat) => {
          setIsDetailModalOpen(false);
          handleOpenEditModal(cat);
        }}
        onDelete={(id) => deleteCategory(id)}
      />
    </div>
  );
}