"use client";

import { useState } from "react";
import Image from "next/image";
import { ShoppingBag, ShoppingCart, Star, ChevronRight, Search } from "lucide-react";
import { cn, formatarMoeda, GENERO_LABEL } from "@/lib/utils";
import { useCarrinho } from "@/lib/carrinho-store";
import { FardamentoDetalheModal } from "./FardamentoDetalheModal";

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

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

type Aluno = {
  id: string;
  nome: string;
  turma?: string;
  unidade: string;
  parentesco: string;
};

export function LojaVitrine({
  fardamentos,
  alunos,
}: {
  fardamentos: Fardamento[];
  alunos: Aluno[];
}) {
  const [busca, setBusca] = useState("");
  const [filtroGenero, setFiltroGenero] = useState("TODOS");
  const [fardamentoSelecionado, setFardamentoSelecionado] =
    useState<Fardamento | null>(null);
  const totalItens = useCarrinho((s) => s.totalItens());

  const destaques = fardamentos.filter((f) => f.destaque && f.tamanhos.length > 0);

  const filtrados = fardamentos.filter((f) => {
    if (f.tamanhos.length === 0) return false; // sem estoque
    const matchBusca =
      !busca || f.nome.toLowerCase().includes(busca.toLowerCase());
    const matchGenero =
      filtroGenero === "TODOS" || f.genero === filtroGenero;
    return matchBusca && matchGenero;
  });

  return (
    <div>
      {/* Saudação */}
      {alunos.length > 0 && (
        <div className="bg-primary-800 -mx-4 px-4 pt-4 pb-6 mb-4 text-white">
          <p className="text-primary-200 text-sm">Alunos vinculados</p>
          <div className="flex gap-2 mt-2 flex-wrap">
            {alunos.map((a) => (
              <span
                key={a.id}
                className="bg-white/15 text-white text-sm px-3 py-1 rounded-full"
              >
                {a.nome.split(" ")[0]}
                {a.turma && ` · ${a.turma}`}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Busca */}
      <div className="relative mb-4">
        <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-3"
          inputMode="search"
        />
      </div>

      {/* Filtro por gênero */}
      <div className="flex gap-2 overflow-x-auto pb-1 mb-5 scrollbar-hide">
        {["TODOS", "UNISSEX", "FEMININO", "MASCULINO"].map((g) => (
          <button
            key={g}
            onClick={() => setFiltroGenero(g)}
            className={cn(
              "flex-shrink-0 px-4 py-1.5 rounded-full text-sm font-medium transition-colors",
              filtroGenero === g
                ? "bg-primary-800 text-white"
                : "bg-white text-gray-600 border border-gray-200"
            )}
          >
            {g === "TODOS" ? "Todos" : GENERO_LABEL[g]}
          </button>
        ))}
      </div>

      {/* Destaques */}
      {destaques.length > 0 && !busca && filtroGenero === "TODOS" && (
        <div className="mb-6">
          <div className="flex items-center gap-2 mb-3">
            <Star size={16} className="text-amber-500" fill="currentColor" />
            <h2 className="font-bold text-gray-900">Destaques</h2>
          </div>
          <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4">
            {destaques.map((f) => (
              <button
                key={f.id}
                onClick={() => setFardamentoSelecionado(f)}
                className="flex-shrink-0 w-40 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden text-left"
              >
                <div className="relative aspect-square bg-gray-100">
                  {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={32} />
                    </div>
                  )}
                </div>
                <div className="p-2.5">
                  <p className="text-xs font-semibold text-gray-900 leading-tight line-clamp-2">
                    {f.nome}
                  </p>
                  <p className="text-primary-700 font-bold text-sm mt-1">
                    {formatarMoeda(Math.min(...f.tamanhos.map((t) => Number(t.preco))))}
                  </p>
                </div>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* Catálogo */}
      <div className="mb-3 flex items-center justify-between">
        <h2 className="font-bold text-gray-900">
          {busca ? `Resultados para "${busca}"` : "Catálogo"}
        </h2>
        <span className="text-sm text-gray-400">{filtrados.length} itens</span>
      </div>

      {filtrados.length === 0 ? (
        <div className="text-center py-16 text-gray-400">
          <ShoppingBag size={48} className="mx-auto mb-3 opacity-30" />
          <p>Nenhum fardamento disponível</p>
        </div>
      ) : (
        <div className="grid grid-cols-2 gap-3">
          {filtrados.map((f) => {
            const precoMin = Math.min(...f.tamanhos.map((t) => Number(t.preco)));
            return (
              <button
                key={f.id}
                onClick={() => setFardamentoSelecionado(f)}
                className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden text-left active:scale-95 transition-transform"
              >
                <div className="relative aspect-square bg-gray-100">
                  {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={36} />
                    </div>
                  )}
                  {f.destaque && (
                    <div className="absolute top-2 left-2">
                      <Star
                        size={14}
                        className="text-amber-400"
                        fill="currentColor"
                      />
                    </div>
                  )}
                </div>
                <div className="p-3">
                  <p className="text-[11px] text-gray-400 uppercase tracking-wide">
                    {GENERO_LABEL[f.genero]}
                  </p>
                  <p className="text-sm font-semibold text-gray-900 leading-tight mt-0.5 line-clamp-2">
                    {f.nome}
                  </p>
                  <p className="text-primary-700 font-bold text-sm mt-1.5">
                    {formatarMoeda(precoMin)}
                  </p>
                  <p className="text-xs text-gray-400 mt-0.5">
                    {f.tamanhos.length} tamanho(s)
                  </p>
                </div>
              </button>
            );
          })}
        </div>
      )}

      {/* Modal detalhe */}
      {fardamentoSelecionado && (
        <FardamentoDetalheModal
          fardamento={fardamentoSelecionado}
          alunos={alunos}
          onClose={() => setFardamentoSelecionado(null)}
        />
      )}
    </div>
  );
}