'use client';

import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { Suspense } from 'react';
import { PublicFlowNav } from '../public-flow-nav';
import { formatCurrency, readOrderState } from '../lib/public-order-store';

function PublicOrderConfirmedPageContent() {
  const searchParams = useSearchParams();
  const state = readOrderState();
  const orderId = searchParams.get('orderId') ?? state.lastOrder?.id ?? '--';
  const eta = searchParams.get('eta') ?? String(state.lastOrder?.etaMinutes ?? '--');
  const total = searchParams.get('total') ? Number(searchParams.get('total')) : state.lastOrder?.total ?? 0;

  return (
    <main className="min-h-screen bg-[linear-gradient(180deg,#eefaf3_0%,#fffdf8_100%)] px-4 py-6 text-slate-950 lg:px-8 lg:py-8">
      <div className="mx-auto max-w-3xl space-y-6">
        <PublicFlowNav />
        <div className="rounded-[2rem] border border-emerald-200 bg-white p-8 shadow-[0_24px_60px_rgba(16,185,129,0.08)]">
          <p className="text-[11px] font-black uppercase tracking-[0.24em] text-emerald-700">Pedido confirmado</p>
          <h1 className="mt-3 text-4xl font-black tracking-tight text-slate-950">Seu pedido entrou na fila da loja.</h1>
          <p className="mt-4 text-sm leading-7 text-slate-600">
            O pedido foi criado no backend real. A proxima rodada pode ligar este fluxo ao rastreio do cliente e ao despacho do entregador.
          </p>
          <div className="mt-6 grid gap-3 md:grid-cols-3">
            <div className="rounded-[1.2rem] bg-slate-50 px-4 py-3">
              <p className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">Pedido</p>
              <p className="mt-2 text-sm font-semibold text-slate-900">{orderId}</p>
            </div>
            <div className="rounded-[1.2rem] bg-slate-50 px-4 py-3">
              <p className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">ETA inicial</p>
              <p className="mt-2 text-sm font-semibold text-slate-900">{eta} minutos</p>
            </div>
            <div className="rounded-[1.2rem] bg-slate-50 px-4 py-3">
              <p className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-500">Total</p>
              <p className="mt-2 text-sm font-semibold text-slate-900">{formatCurrency(total)}</p>
            </div>
          </div>
          <div className="mt-6 flex flex-wrap gap-3">
            <Link href="/public-order/tracking" className="inline-flex min-h-[3rem] items-center justify-center rounded-full bg-emerald-600 px-5 text-xs font-black uppercase tracking-[0.18em] text-white">
              Acompanhar pedido
            </Link>
            <Link href="/public-order" className="inline-flex min-h-[3rem] items-center justify-center rounded-full border border-slate-200 bg-white px-5 text-xs font-black uppercase tracking-[0.18em] text-slate-800">
              Fazer novo pedido
            </Link>
            <Link href="/public-order/discover" className="inline-flex min-h-[3rem] items-center justify-center rounded-full bg-emerald-600 px-5 text-xs font-black uppercase tracking-[0.18em] text-white">
              Ver outras lojas
            </Link>
          </div>
        </div>
      </div>
    </main>
  );
}

export default function PublicOrderConfirmedPage() {
  return (
    <Suspense fallback={<main className="min-h-screen px-4 py-6">Carregando confirmacao...</main>}>
      <PublicOrderConfirmedPageContent />
    </Suspense>
  );
}