"use client";

import Image from "next/image";
import Link from "next/link";
import { useMemo, useState } from "react";
import { Package, Eye } from "lucide-react";

// Inline SVGs if needed, but let's try to keep it clean.
function CopyIcon({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>
  );
}

function ExternalLinkIcon({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
      <polyline points="15 3 21 3 21 9" />
      <line x1="10" y1="14" x2="21" y2="3" />
    </svg>
  );
}

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  );
}

type CatalogRow = {
  id: string;
  slug: string;
  store_name: string | null;
  catalog_name: string | null;
  logo_url: string | null;
  catalog_logo_url: string | null;
  product_count?: number;
  monthly_visits?: number;
};

type CatalogsClientProps = {
  baseUrl: string;
  rows: CatalogRow[];
};

export default function CatalogsClient({ baseUrl, rows }: CatalogsClientProps) {
  const [search, setSearch] = useState("");
  const [logoFilter, setLogoFilter] = useState<"all" | "with_logo" | "no_logo">("all");

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    return rows.filter((row) => {
      const logo = row.catalog_logo_url || row.logo_url;
      if (logoFilter === "with_logo" && !logo) return false;
      if (logoFilter === "no_logo" && logo) return false;
      if (!term) return true;
      const haystack = [row.store_name, row.catalog_name, row.slug].filter(Boolean).join(" ").toLowerCase();
      return haystack.includes(term);
    });
  }, [rows, search, logoFilter]);

  return (
    <div className="min-h-screen bg-slate-50/50 p-6 sm:p-8">
      <div className="mx-auto flex max-w-[1920px] flex-col gap-8">
        {/* Header Section */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Catálogos</h1>
            <p className="mt-1 text-slate-500">Gerencie e visualize todos os catálogos públicos.</p>
          </div>
          <Link
            href="/"
            className="inline-flex items-center justify-center rounded-xl bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-200 transition-all hover:bg-slate-50 hover:text-slate-900 active:scale-95"
          >
            Voltar ao Dashboard
          </Link>
        </div>

        {/* Filters Section */}
        <div className="flex flex-col gap-4 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200/60 sm:flex-row sm:items-center">
          <div className="relative flex-1">
            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <SearchIcon className="text-slate-400" />
            </div>
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Buscar por nome da loja, catálogo ou slug..."
              className="block w-full rounded-xl border-0 bg-slate-50 py-2.5 pl-10 pr-4 text-slate-900 ring-1 ring-inset ring-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
            />
          </div>
          <div className="sm:w-48">
            <select
              value={logoFilter}
              onChange={(e) => setLogoFilter(e.target.value as typeof logoFilter)}
              className="block w-full rounded-xl border-0 bg-slate-50 py-2.5 pl-3 pr-10 text-slate-900 ring-1 ring-inset ring-slate-200 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
            >
              <option value="all">Todos os status</option>
              <option value="with_logo">Com logo</option>
              <option value="no_logo">Sem logo</option>
            </select>
          </div>
          <div className="text-sm font-medium text-slate-500 px-2 whitespace-nowrap">
            {filtered.length} {filtered.length === 1 ? 'catálogo' : 'catálogos'}
          </div>
        </div>

        {/* Grid Section */}
        {filtered.length > 0 ? (
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
            {filtered.map((row) => {
              const logo = row.catalog_logo_url || row.logo_url;
              const name = row.catalog_name || row.store_name || "Loja sem nome";
              const link = `${baseUrl}/${row.slug}`;
              const initials = (row.store_name || row.slug || "L")
                .split(' ')
                .map(n => n[0])
                .slice(0, 2)
                .join('')
                .toUpperCase();

              return (
                <div
                  key={row.id}
                  className="group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 transition-all hover:-translate-y-1 hover:shadow-md"
                >
                  {/* Card Header / Preview */}
                  <div className="relative aspect-[16/9] w-full overflow-hidden bg-slate-100">
                    {logo ? (
                      <div className="absolute inset-0 flex items-center justify-center bg-white p-6">
                        <div className="relative h-full w-full">
                           <Image
                            src={logo}
                            alt={name}
                            fill
                            className="object-contain transition-transform duration-500 group-hover:scale-110"
                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                          />
                        </div>
                      </div>
                    ) : (
                      <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200">
                        <span className="text-4xl font-bold text-slate-300">{initials}</span>
                      </div>
                    )}
                    
                    {/* Overlay Actions */}
                    <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                       <a
                        href={link}
                        target="_blank"
                        rel="noreferrer"
                        className="rounded-full bg-white p-2.5 text-slate-900 shadow-sm transition-transform hover:scale-110 hover:bg-slate-50"
                        title="Visitar Loja"
                      >
                        <ExternalLinkIcon className="h-5 w-5" />
                      </a>
                      <button
                        onClick={() => {
                           if (typeof navigator !== 'undefined') {
                              navigator.clipboard?.writeText(link);
                           }
                        }}
                        className="rounded-full bg-white p-2.5 text-slate-900 shadow-sm transition-transform hover:scale-110 hover:bg-slate-50"
                        title="Copiar Link"
                      >
                        <CopyIcon className="h-5 w-5" />
                      </button>
                    </div>
                  </div>

                  {/* Card Content */}
                  <div className="flex flex-1 flex-col p-5">
                    <div className="mb-2 flex items-center justify-between">
                      <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
                        Publicado
                      </span>
                    </div>
                    <h3 className="line-clamp-1 text-lg font-semibold text-slate-900" title={name}>
                      {name}
                    </h3>
                    <p className="mt-1 line-clamp-1 text-sm text-slate-500 font-mono">
                      /{row.slug}
                    </p>
                    
                    <div className="mt-4 flex items-center justify-between gap-4 border-t border-slate-100 pt-4">
                      <div className="flex items-center gap-1.5 text-xs font-medium text-slate-600" title="Produtos ativos">
                        <Package className="h-3.5 w-3.5 text-slate-400" />
                        <span>{row.product_count || 0} produtos</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-xs font-medium text-slate-600" title="Acessos no mês">
                        <Eye className="h-3.5 w-3.5 text-slate-400" />
                        <span>{row.monthly_visits !== undefined ? row.monthly_visits : '-'} visitas</span>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-slate-50 py-20 text-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
              <SearchIcon className="h-6 w-6 text-slate-400" />
            </div>
            <h3 className="mt-4 text-lg font-semibold text-slate-900">Nenhum catálogo encontrado</h3>
            <p className="mt-1 text-sm text-slate-500">
              Tente ajustar seus filtros ou buscar por outro termo.
            </p>
            <button
              onClick={() => {
                setSearch("");
                setLogoFilter("all");
              }}
              className="mt-4 text-sm font-medium text-blue-600 hover:text-blue-500"
            >
              Limpar filtros
            </button>
          </div>
        )}
      </div>
    </div>
  );
}