"use client";

import React, { useEffect, useState, Suspense } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import confetti from "canvas-confetti";
import {
  CheckCircle2,
  Printer,
  ShoppingBag,
  Truck,
  MessageCircle,
  Clock,
  Sparkles,
  ArrowRight,
} from "lucide-react";
import { STORE_INFO } from "@/data/storeInfo";

function OrderConfirmedContent() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get("orderId") || `ord_${Date.now()}`;
  const orderNumber = searchParams.get("orderNumber") || `RA-2026-${Math.floor(1000 + Math.random() * 9000)}`;

  useEffect(() => {
    try {
      confetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 },
        colors: ["#78350f", "#d97706", "#f59e0b", "#10b981"],
      });
    } catch (e) {}
  }, []);

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-stone-50 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
      <div className="max-w-2xl w-full bg-white rounded-3xl p-6 sm:p-10 shadow-2xl border border-stone-200 text-center space-y-6">
        
        {/* Success Icon */}
        <div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto shadow-inner animate-in zoom-in-75 duration-300">
          <CheckCircle2 className="w-10 h-10" />
        </div>

        {/* Heading */}
        <div>
          <div className="inline-flex items-center gap-1.5 bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-2">
            <Sparkles className="w-3.5 h-3.5 text-amber-700" />
            <span>Pago Confirmado Correctamente</span>
          </div>
          <h1 className="font-serif text-3xl sm:text-4xl font-bold text-stone-900">
            ¡Gracias por tu compra!
          </h1>
          <p className="text-stone-600 text-xs sm:text-sm mt-2">
            Hemos recibido tu pedido y nuestro maestro pastelero ya se prepara en el obrador de Aspe para empaquetar tus productos con el máximo cuidado.
          </p>
        </div>

        {/* Order Details Card */}
        <div className="bg-stone-50 rounded-2xl p-5 sm:p-6 border border-stone-200 text-left space-y-3 text-xs sm:text-sm">
          <div className="flex justify-between items-center pb-3 border-b border-stone-200">
            <span className="text-stone-500">Número de Pedido:</span>
            <span className="font-mono font-bold text-base text-amber-950">
              {orderNumber}
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-stone-500">Estado:</span>
            <span className="bg-emerald-100 text-emerald-800 font-bold px-2.5 py-0.5 rounded-full text-xs">
              En preparación (Obrador Aspe)
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-stone-500">Plazo estimado de entrega:</span>
            <span className="font-semibold text-stone-900">24 - 48 Horas laborables</span>
          </div>
          <div className="flex justify-between items-center pt-2 border-t border-stone-200">
            <span className="text-stone-500">Comprobante y Factura:</span>
            <span className="text-stone-700">Enviada a tu correo electrónico</span>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-3 pt-2">
          <button
            onClick={handlePrint}
            className="flex-1 bg-stone-100 hover:bg-stone-200 text-stone-800 py-3 rounded-xl font-semibold text-xs flex items-center justify-center gap-2 transition border border-stone-300"
          >
            <Printer className="w-4 h-4" />
            <span>Imprimir Justificante</span>
          </button>
          
          <Link
            href="../"
            className="flex-1 bg-amber-900 hover:bg-amber-950 text-amber-50 py-3 rounded-xl font-bold text-xs flex items-center justify-center gap-2 transition shadow-md"
          >
            <ShoppingBag className="w-4 h-4" />
            <span>Volver a la Tienda</span>
          </Link>
        </div>

        {/* Direct WhatsApp Assistance */}
        <div className="pt-4 border-t border-stone-200 flex items-center justify-center gap-2 text-xs text-stone-500">
          <span>¿Tienes alguna consulta sobre tu entrega?</span>
          <a
            href={`https://wa.me/34965493373?text=Hola,%20tengo%20una%20consulta%20sobre%20mi%20pedido%20${orderNumber}`}
            target="_blank"
            rel="noopener noreferrer"
            className="text-emerald-700 font-bold hover:underline flex items-center gap-1"
          >
            <MessageCircle className="w-3.5 h-3.5" />
            <span>WhatsApp Atención al Cliente</span>
          </a>
        </div>

      </div>
    </div>
  );
}

export default function OrderConfirmedPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-stone-50 flex items-center justify-center">Cargando confirmación...</div>}>
      <OrderConfirmedContent />
    </Suspense>
  );
}