"use client";

import { useState } from "react";
import Image from "next/image";
import {
  Plus,
  Search,
  Edit,
  Trash2,
  Eye,
  EyeOff,
  ShoppingBag,
  AlertTriangle,
  Star,
} from "lucide-react";
import { cn, formatarMoeda, GENERO_LABEL } from "@/lib/utils";
import { FardamentoModal } from "./FardamentoModal";

type Tamanho = {
  id: string;
  tamanho: string;
  preco: any;
  estoque: number;
  estoqueMinimo: number;
  ativo: boolean;
};

type Fardamento = {
  id: string;
  nome: string;
  descricao: string | null;
  genero: string;
  categoria: string | null;
  imagens: string[];
  ativo: boolean;
  destaque: boolean;
  unidadeId: string;
  tamanhos: Tamanho[];
  unidade: { nome: string };
};

export function FardamentosAdminClient({
  fardamentosIniciais,
  unidades,
  unidadeIdPadrao,
}: {
  fardamentosIniciais: Fardamento[];
  unidades: { id: string; nome: string }[];
  unidadeIdPadrao: string;
}) {
  const [fardamentos, setFardamentos] = useState(fardamentosIniciais);
  const [busca, setBusca] = useState("");
  const [filtroStatus, setFiltroStatus] = useState<"todos" | "ativos" | "inativos">("ativos");
  const [modalAberto, setModalAberto] = useState(false);
  const [fardamentoEditando, setFardamentoEditando] = useState<Fardamento | null>(null);

  const filtrados = fardamentos.filter((f) => {
    const matchBusca =
      f.nome.toLowerCase().includes(busca.toLowerCase()) ||
      f.categoria?.toLowerCase().includes(busca.toLowerCase());
    const matchStatus =
      filtroStatus === "todos"
        ? true
        : filtroStatus === "ativos"
        ? f.ativo
        : !f.ativo;
    return matchBusca && matchStatus;
  });

  function abrirNovo() {
    setFardamentoEditando(null);
    setModalAberto(true);
  }

  function abrirEditar(f: Fardamento) {
    setFardamentoEditando(f);
    setModalAberto(true);
  }

  async function toggleAtivo(id: string, ativo: boolean) {
    const res = await fetch(`/api/fardamentos/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ativo: !ativo }),
    });
    if (res.ok) {
      setFardamentos((prev) =>
        prev.map((f) => (f.id === id ? { ...f, ativo: !ativo } : f))
      );
    }
  }

  async function toggleDestaque(id: string, destaque: boolean) {
    const res = await fetch(`/api/fardamentos/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ destaque: !destaque }),
    });
    if (res.ok) {
      setFardamentos((prev) =>
        prev.map((f) => (f.id === id ? { ...f, destaque: !destaque } : f))
      );
    }
  }

  function onSalvo(fardamento: Fardamento) {
    setFardamentos((prev) => {
      const idx = prev.findIndex((f) => f.id === fardamento.id);
      if (idx >= 0) {
        const novo = [...prev];
        novo[idx] = fardamento;
        return novo;
      }
      return [fardamento, ...prev];
    });
    setModalAberto(false);
  }

  const totalEstoqueBaixo = fardamentos
    .flatMap((f) => f.tamanhos)
    .filter((t) => t.ativo && t.estoque <= t.estoqueMinimo).length;

  return (
    <div>
      {/* Cabeçalho */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Fardamentos</h1>
          <p className="text-gray-500 text-sm mt-0.5">
            {fardamentos.filter((f) => f.ativo).length} itens ativos
          </p>
        </div>
        <button
          onClick={abrirNovo}
          className="flex items-center gap-2 bg-primary-800 text-white px-4 py-2.5 rounded-xl font-medium text-sm hover:bg-primary-900 transition-colors"
        >
          <Plus size={18} />
          <span className="hidden sm:inline">Novo fardamento</span>
        </button>
      </div>

      {/* Alerta estoque baixo */}
      {totalEstoqueBaixo > 0 && (
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-3.5 flex items-center gap-3 mb-5">
          <AlertTriangle size={18} className="text-amber-600 flex-shrink-0" />
          <p className="text-amber-800 text-sm">
            <strong>{totalEstoqueBaixo} tamanho(s)</strong> com estoque abaixo do mínimo.
          </p>
        </div>
      )}

      {/* Filtros */}
      <div className="flex flex-col sm:flex-row gap-3 mb-5">
        <div className="relative flex-1">
          <Search
            size={16}
            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
          />
          <input
            type="text"
            value={busca}
            onChange={(e) => setBusca(e.target.value)}
            placeholder="Buscar fardamento..."
            className="input pl-9 py-2.5"
          />
        </div>
        <div className="flex rounded-xl border border-gray-200 overflow-hidden">
          {(["todos", "ativos", "inativos"] as const).map((status) => (
            <button
              key={status}
              onClick={() => setFiltroStatus(status)}
              className={cn(
                "px-4 py-2.5 text-sm font-medium transition-colors capitalize",
                filtroStatus === status
                  ? "bg-primary-800 text-white"
                  : "text-gray-600 hover:bg-gray-50"
              )}
            >
              {status}
            </button>
          ))}
        </div>
      </div>

      {/* Grid */}
      {filtrados.length === 0 ? (
        <div className="text-center py-16 text-gray-400">
          <ShoppingBag size={48} className="mx-auto mb-3 opacity-30" />
          <p className="font-medium">Nenhum fardamento encontrado</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {filtrados.map((f) => {
            const tamanhosBaixos = f.tamanhos.filter(
              (t) => t.ativo && t.estoque <= t.estoqueMinimo
            ).length;
            const precoMin = Math.min(...f.tamanhos.map((t) => Number(t.preco)));
            const precoMax = Math.max(...f.tamanhos.map((t) => Number(t.preco)));

            return (
              <div
                key={f.id}
                className={cn(
                  "bg-white rounded-2xl shadow-sm border overflow-hidden transition-all",
                  !f.ativo ? "opacity-60 border-gray-100" : "border-gray-100 hover:shadow-md"
                )}
              >
                {/* Imagem */}
                <div className="relative bg-gray-100 aspect-square">
                  {f.imagens[0] ? (
                    <Image
                      src={f.imagens[0]}
                      alt={f.nome}
                      fill
                      className="object-cover"
                    />
                  ) : (
                    <div className="flex items-center justify-center h-full text-gray-300">
                      <ShoppingBag size={48} />
                    </div>
                  )}
                  {/* Badges */}
                  <div className="absolute top-2 left-2 flex gap-1">
                    {f.destaque && (
                      <span className="bg-amber-400 text-amber-900 text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
                        <Star size={10} fill="currentColor" /> Destaque
                      </span>
                    )}
                    {!f.ativo && (
                      <span className="bg-gray-600 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                        Inativo
                      </span>
                    )}
                  </div>
                  {tamanhosBaixos > 0 && (
                    <div className="absolute top-2 right-2">
                      <span className="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                        Estoque baixo
                      </span>
                    </div>
                  )}
                </div>

                {/* Info */}
                <div className="p-3">
                  <p className="text-xs text-gray-400 uppercase tracking-wide mb-0.5">
                    {GENERO_LABEL[f.genero]} · {f.categoria}
                  </p>
                  <h3 className="font-semibold text-gray-900 text-sm leading-tight mb-1">
                    {f.nome}
                  </h3>
                  <p className="text-primary-700 font-bold text-sm">
                    {precoMin === precoMax
                      ? formatarMoeda(precoMin)
                      : `${formatarMoeda(precoMin)} – ${formatarMoeda(precoMax)}`}
                  </p>
                  <p className="text-xs text-gray-400 mt-1">
                    {f.tamanhos.filter((t) => t.ativo).length} tamanho(s) ·{" "}
                    {f.tamanhos.reduce((acc, t) => acc + t.estoque, 0)} em estoque
                  </p>

                  {/* Ações */}
                  <div className="flex gap-2 mt-3">
                    <button
                      onClick={() => abrirEditar(f)}
                      className="flex-1 flex items-center justify-center gap-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium py-2 rounded-lg transition-colors"
                    >
                      <Edit size={13} /> Editar
                    </button>
                    <button
                      onClick={() => toggleDestaque(f.id, f.destaque)}
                      title={f.destaque ? "Remover destaque" : "Destacar"}
                      className={cn(
                        "p-2 rounded-lg transition-colors",
                        f.destaque
                          ? "bg-amber-100 text-amber-700"
                          : "bg-gray-100 text-gray-400 hover:text-amber-600"
                      )}
                    >
                      <Star size={14} fill={f.destaque ? "currentColor" : "none"} />
                    </button>
                    <button
                      onClick={() => toggleAtivo(f.id, f.ativo)}
                      title={f.ativo ? "Desativar" : "Ativar"}
                      className={cn(
                        "p-2 rounded-lg transition-colors",
                        f.ativo
                          ? "bg-gray-100 text-gray-500 hover:bg-red-100 hover:text-red-600"
                          : "bg-green-100 text-green-700"
                      )}
                    >
                      {f.ativo ? <EyeOff size={14} /> : <Eye size={14} />}
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Modal */}
      {modalAberto && (
        <FardamentoModal
          fardamento={fardamentoEditando}
          unidades={unidades}
          unidadeIdPadrao={unidadeIdPadrao}
          onClose={() => setModalAberto(false)}
          onSalvo={onSalvo}
        />
      )}
    </div>
  );
}