'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { formatCurrency, publicApiBase } from '../public-order/lib/public-order-store';

type PublicStore = {
  id: string;
  slug: string;
  name: string;
  description?: string | null;
  city?: string | null;
  neighborhood?: string | null;
  baseDeliveryFee?: number | string | null;
};

export default function ClienteEntryPage() {
  const [stores, setStores] = useState<PublicStore[]>([]);
  const [error, setError] = useState('');

  useEffect(() => {
    void fetch(`${publicApiBase}/public/catalog/stores`, { cache: 'no-store' })
      .then(async (response) => {
        const payload = await response.json().catch(() => null);
        if (!response.ok) {
          throw new Error(payload?.message ?? 'Falha ao carregar a vitrine de lojas.');
        }
        return payload as PublicStore[];
      })
      .then((payload) => setStores(payload.slice(0, 3)))
      .catch((loadError) => setError(loadError instanceof Error ? loadError.message : 'Falha ao carregar a vitrine de lojas.'));
  }, []);

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.15),transparent_20%),radial-gradient(circle_at_top_right,rgba(59,130,246,0.16),transparent_24%),linear-gradient(180deg,#fffefb_0%,#f8fafc_48%,#eefbf4_100%)] px-4 py-6 text-slate-950 lg:px-8 lg:py-8">
      <div className="mx-auto max-w-7xl space-y-6">
        <section className="overflow-hidden rounded-[2.4rem] border border-white/80 bg-[linear-gradient(135deg,#07111d_0%,#0f3d63_52%,#10b981_100%)] p-6 text-white shadow-[0_32px_90px_rgba(15,23,42,0.18)] lg:p-8">
          <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
            <div>
              <p className="text-xs font-black uppercase tracking-[0.34em] text-emerald-100">Acesso do cliente</p>
              <h1 className="mt-4 max-w-4xl text-4xl font-black tracking-tight lg:text-6xl">Entre, escolha a loja e faca seu pedido sem passar pelo painel interno.</h1>
              <p className="mt-4 max-w-3xl text-sm leading-7 text-white/85 lg:text-base">
                Esta e a entrada externa para o cliente final. Aqui ele descobre lojas, abre o cardapio, monta o carrinho e acompanha o pedido.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <Link href="/public-order/discover" className="inline-flex min-h-[3.2rem] items-center justify-center rounded-full bg-white px-5 text-xs font-black uppercase tracking-[0.22em] text-[#07111d]">
                  Pedir agora
                </Link>
                <Link href="/app" className="inline-flex min-h-[3.2rem] items-center justify-center rounded-full border border-white/20 bg-white/10 px-5 text-xs font-black uppercase tracking-[0.22em] text-white backdrop-blur">
                  Ver vitrine do app
                </Link>
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-3 xl:grid-cols-1">
              <div className="rounded-[1.6rem] border border-white/10 bg-white/10 p-4 backdrop-blur">
                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-emerald-50">Fluxo</p>
                <p className="mt-3 text-3xl font-black">Pedido real</p>
                <p className="mt-2 text-sm text-white/80">Carrinho, checkout e pedido na operacao.</p>
              </div>
              <div className="rounded-[1.6rem] border border-white/10 bg-white/10 p-4 backdrop-blur">
                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-emerald-50">Lojas</p>
                <p className="mt-3 text-3xl font-black">{stores.length || '--'}</p>
                <p className="mt-2 text-sm text-white/80">Destaques para o cliente escolher.</p>
              </div>
              <div className="rounded-[1.6rem] border border-white/10 bg-white/10 p-4 backdrop-blur">
                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-emerald-50">Entrega</p>
                <p className="mt-3 text-3xl font-black">Rastreio</p>
                <p className="mt-2 text-sm text-white/80">Acompanhar depois da compra.</p>
              </div>
            </div>
          </div>
        </section>

        {error ? <section className="rounded-[1.4rem] border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-700">{error}</section> : null}

        <section className="grid gap-4 lg:grid-cols-3">
          {stores.map((store, index) => (
            <article key={store.id} className="overflow-hidden rounded-[1.9rem] border border-white/80 bg-white p-5 shadow-[0_22px_52px_rgba(15,23,42,0.08)]">
              <div className={`rounded-[1.5rem] bg-gradient-to-br ${index % 3 === 0 ? 'from-[#07111d] to-[#0f766e]' : index % 3 === 1 ? 'from-[#1d4ed8] to-[#06b6d4]' : 'from-[#0f3d63] to-[#10b981]'} p-5 text-white`}>
                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-white/80">{store.neighborhood ?? 'Loja ativa'}</p>
                <h2 className="mt-3 text-2xl font-black">{store.name}</h2>
                <p className="mt-3 inline-flex rounded-full bg-white/15 px-3 py-2 text-[11px] font-black uppercase tracking-[0.16em] text-white">
                  {store.city ?? 'Cidade ativa'}
                </p>
              </div>
              <p className="mt-4 text-sm leading-6 text-slate-600">{store.description ?? 'Catalogo pronto para pedido publico.'}</p>
              <div className="mt-4 rounded-[1.1rem] bg-slate-50 px-4 py-3 text-sm text-slate-700">
                Frete base: <strong className="text-slate-950">{formatCurrency(store.baseDeliveryFee ?? 0)}</strong>
              </div>
              <Link href={`/public-order?store=${store.slug}`} className="mt-5 inline-flex min-h-[3rem] w-full items-center justify-center rounded-full bg-slate-950 px-4 text-xs font-black uppercase tracking-[0.18em] text-white">
                Abrir loja
              </Link>
            </article>
          ))}
        </section>

        <section className="grid gap-4 xl:grid-cols-3">
          <div className="rounded-[1.8rem] border border-slate-200 bg-white p-5 shadow-[0_18px_50px_rgba(15,23,42,0.06)]">
            <p className="text-[11px] font-black uppercase tracking-[0.22em] text-slate-500">Passo 1</p>
            <h3 className="mt-3 text-2xl font-black text-slate-950">Escolher a loja</h3>
            <p className="mt-3 text-sm leading-6 text-slate-600">O cliente entra pela descoberta publica e escolhe onde quer comprar.</p>
          </div>
          <div className="rounded-[1.8rem] border border-slate-200 bg-white p-5 shadow-[0_18px_50px_rgba(15,23,42,0.06)]">
            <p className="text-[11px] font-black uppercase tracking-[0.22em] text-slate-500">Passo 2</p>
            <h3 className="mt-3 text-2xl font-black text-slate-950">Montar o carrinho</h3>
            <p className="mt-3 text-sm leading-6 text-slate-600">Produtos reais do catalogo entram no carrinho com persistencia local.</p>
          </div>
          <div className="rounded-[1.8rem] border border-slate-200 bg-white p-5 shadow-[0_18px_50px_rgba(15,23,42,0.06)]">
            <p className="text-[11px] font-black uppercase tracking-[0.22em] text-slate-500">Passo 3</p>
            <h3 className="mt-3 text-2xl font-black text-slate-950">Finalizar e rastrear</h3>
            <p className="mt-3 text-sm leading-6 text-slate-600">Depois do checkout, o pedido cai na loja e segue para rastreio e entrega.</p>
          </div>
        </section>
      </div>
    </main>
  );
}