"use client";
import { useSearchParams, useRouter } from "next/navigation";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2, Copy, QrCode } from "lucide-react";

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

export default function PaymentPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const orderId = searchParams.get("orderId");

  const handleConfirm = () => {
    // Simulate payment confirmation
    const order = JSON.parse(localStorage.getItem(`order_${orderId}`) || "{}");
    order.status = "Pagado";
    order.trackingNumber = "PAL-" + Math.random().toString(36).substring(2, 10).toUpperCase();
    localStorage.setItem(`order_${orderId}`, JSON.stringify(order));
    router.push(`/success?orderId=${orderId}`);
  };

  return (
    <main>
      <NavBar />
      <Container className="py-32 max-w-2xl">
      <Card className="border-2 border-blue-100">
        <CardHeader className="text-center">
          <Heading className="text-2xl">Instrucciones de Pago</Heading>
          <p className="text-neutral-500">Orden: #{orderId}</p>
        </CardHeader>
        <CardContent className="space-y-8">
          <div className="p-6 bg-blue-50 rounded-xl space-y-4">
            <h3 className="font-bold flex items-center gap-2">
              <QrCode className="w-5 h-5" /> Pago con Binance (USDT)
            </h3>
            <div className="bg-white p-3 rounded border font-mono text-sm break-all">
              TY7x9v2B8n1m4K5L6P3Q2W1E0R9T8Y7U6I
            </div>
            <Button variant="outline" size="sm" className="w-full gap-2">
              <Copy className="w-4 h-4" /> Copiar Wallet
            </Button>
          </div>

          <div className="p-6 bg-neutral-50 rounded-xl space-y-4">
            <h3 className="font-bold">Transferencia Bancaria / ACH</h3>
            <div className="text-sm space-y-1">
              <p><strong>Banco:</strong> Chase Bank / BBVA</p>
              <p><strong>Cuenta:</strong> 1234567890</p>
              <p><strong>CLABE:</strong> 012345678901234567</p>
              <p><strong>Beneficiario:</strong> EL PALACIO DE TENI LLC</p>
            </div>
          </div>

          <div className="text-center space-y-4">
            <p className="text-sm text-neutral-600">
              Una vez realizado el pago, haz clic en el botón de abajo para confirmar. 
              Nuestro sistema verificará la transacción en minutos.
            </p>
            <Button onClick={handleConfirm} className="w-full h-14 text-lg bg-green-600 hover:bg-green-700">
              Ya realicé mi pago
            </Button>
          </div>
        </CardContent>
      </Card>
      </Container>
      <Footer />
    </main>
  );
}