"use client";
import { useSearchParams } from "next/navigation";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2, Truck, Package } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";

import { NavBar } from "@/components/navbar";
import { Footer } from "@/components/footer";

export default function SuccessPage() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get("orderId");
  const [order, setOrder] = useState<any>(null);

  useEffect(() => {
    const data = localStorage.getItem(`order_${orderId}`);
    if (data) setOrder(JSON.parse(data));
  }, [orderId]);

  return (
    <main>
      <NavBar />
      <Container className="py-32 max-w-2xl text-center">
      <div className="mb-8 flex justify-center">
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
          <CheckCircle2 className="w-12 h-12 text-green-600" />
        </div>
      </div>
      <Heading className="mb-4">¡Pedido Confirmado!</Heading>
      <p className="text-neutral-600 mb-8">
        Gracias por confiar en El Palacio de Teni. Tu pago ha sido recibido y tu pedido está siendo procesado.
      </p>

      <Card className="mb-8 text-left">
        <CardContent className="pt-6 space-y-4">
          <div className="flex justify-between items-center border-b pb-4">
            <span className="text-neutral-500">Número de Orden:</span>
            <span className="font-bold">#{orderId}</span>
          </div>
          <div className="flex justify-between items-center border-b pb-4">
            <span className="text-neutral-500">Número de Guía (Rastreo):</span>
            <span className="font-bold text-blue-600">{order?.trackingNumber || "Generando..."}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-neutral-500">Estado:</span>
            <span className="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">
              {order?.status || "Pagado"}
            </span>
          </div>
        </CardContent>
      </Card>

      <div className="flex flex-col sm:flex-row gap-4 justify-center">
        <Button asChild>
          <Link href="/tracking">Ir a Seguimiento</Link>
        </Button>
        <Button variant="outline" asChild>
          <Link href="/">Volver al Inicio</Link>
        </Button>
      </div>
      </Container>
      <Footer />
    </main>
  );
}