import Link from 'next/link';
import type { Metadata } from 'next';

interface Props {
  searchParams: Promise<{ orderId?: string }>;
}

export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
  const { orderId } = await searchParams;
  return {
    title: orderId
      ? `Pedido ${orderId.slice(0, 8).toUpperCase()} confirmado — mercadodevida`
      : 'Pedido confirmado — mercadodevida',
  };
}

export default async function OrderConfirmationPage({ searchParams }: Props) {
  const { orderId } = await searchParams;

  return (
    <div className="max-w-2xl mx-auto px-4 py-16 text-center">
      <div className="text-7xl mb-6">✅</div>
      <h1 className="text-3xl font-bold text-gray-900 mb-3" style={{ fontFamily: 'var(--font-heading)' }}>
        ¡Pedido confirmado!
      </h1>
      {orderId && (
        <p className="text-sm text-gray-500 mb-2 font-mono">
          Referencia: {orderId.slice(0, 8).toUpperCase()}
        </p>
      )}
      <p className="text-lg text-gray-600 mb-2">
        Tu pedido ha sido recibido correctamente.
      </p>
      <p className="text-gray-500 mb-8">
        Te hemos enviado un email de confirmación con los detalles.
      </p>

      <div className="bg-gray-50 rounded-xl border border-gray-200 p-6 mb-8 text-left">
        <h2 className="font-bold text-gray-900 mb-4">Próximos pasos</h2>
        <ul className="space-y-3 text-sm text-gray-600">
          <li className="flex gap-3">
            <span className="w-6 h-6 bg-[#70ad47] text-white rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold">1</span>
            <span>Recibirás un email de confirmación en tu bandeja de entrada.</span>
          </li>
          <li className="flex gap-3">
            <span className="w-6 h-6 bg-[#70ad47] text-white rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold">2</span>
            <span>Prepararemos tu pedido en 24-48 horas laborables.</span>
          </li>
          <li className="flex gap-3">
            <span className="w-6 h-6 bg-[#70ad47] text-white rounded-full flex items-center justify-center flex-shrink-0 text-xs font-bold">3</span>
            <span>Recibirás un email con el número de seguimiento.</span>
          </li>
        </ul>
      </div>

      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <Link
          href="/"
          className="px-6 py-3 bg-[#70ad47] hover:bg-[#5a9040] text-white font-semibold rounded-xl transition-colors"
        >
          Volver al inicio
        </Link>
        <Link
          href="/products"
          className="px-6 py-3 border border-gray-300 hover:border-[#70ad47] text-gray-700 font-semibold rounded-xl transition-colors"
        >
          Seguir comprando
        </Link>
      </div>
    </div>
  );
}
