"use client";

import { useSyncExternalStore } from "react";
import { ShoppingBag } from "lucide-react";
import { lerTemaDaLoja, TEMAS_SEM_ESQUELETO } from "@/themes/tema-no-navegador";

/* O tema que a última loja aberta gravou (themes/tema-no-navegador.ts). O
   esqueleto de carregamento é o desenho do Padrão e do Vitrine; na família
   Vendor ele pisca uma tela estranha antes da página e passa a sensação de
   lentidão. */

export default function Loading() {
  /* Lido fora de efeito: no servidor não há tema, no cliente é uma leitura
     síncrona, e assim o esqueleto não pisca antes de sumir. */
  const tema = useSyncExternalStore(
    () => () => {},
    lerTemaDaLoja,
    () => null
  );

  /* Sem esqueleto: a navegação do Vendor e da Boutique troca de página direto. */
  if (tema && TEMAS_SEM_ESQUELETO.includes(tema)) return null;

  return (
    <div className="min-h-screen bg-gray-50 animate-pulse">
      {/* Header Skeleton */}
      <div className="bg-white border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <div className="h-14 w-14 rounded-full bg-gray-200" />
              <div className="h-6 w-32 bg-gray-200 rounded" />
            </div>
            <div className="hidden md:block w-full md:w-[400px] h-12 bg-gray-200 rounded-full" />
            <div className="hidden md:block h-10 w-24 bg-gray-200 rounded-lg" />
          </div>
        </div>
      </div>

      {/* Banner Skeleton */}
      <div className="w-full bg-gray-100 aspect-[32/9] max-h-[400px] relative">
        <div className="absolute inset-0 flex items-center justify-center">
          <ShoppingBag className="h-16 w-16 text-gray-300" />
        </div>
      </div>

      {/* Content Skeleton */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">
        
        {/* Section 1 */}
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div className="h-8 w-48 bg-gray-200 rounded" />
            <div className="h-8 w-24 bg-gray-200 rounded-full" />
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="bg-white rounded-2xl border border-gray-100 overflow-hidden h-[290px] flex flex-col">
                <div className="aspect-square bg-gray-200" />
                <div className="p-3 flex-1 flex flex-col justify-between space-y-3">
                  <div className="space-y-2">
                    <div className="h-4 w-3/4 bg-gray-200 rounded" />
                    <div className="h-3 w-1/2 bg-gray-200 rounded" />
                  </div>
                  <div className="flex items-end justify-between">
                    <div className="h-5 w-20 bg-gray-200 rounded" />
                    <div className="h-8 w-8 rounded-full bg-gray-200" />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Section 2 */}
        <div className="space-y-6">
          <div className="h-8 w-48 bg-gray-200 rounded" />
          <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="bg-white rounded-2xl border border-gray-100 overflow-hidden h-[290px] flex flex-col">
                <div className="aspect-square bg-gray-200" />
                <div className="p-3 flex-1 flex flex-col justify-between space-y-3">
                  <div className="space-y-2">
                    <div className="h-4 w-3/4 bg-gray-200 rounded" />
                    <div className="h-3 w-1/2 bg-gray-200 rounded" />
                  </div>
                  <div className="flex items-end justify-between">
                    <div className="h-5 w-20 bg-gray-200 rounded" />
                    <div className="h-8 w-8 rounded-full bg-gray-200" />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}