"use client";

import React, { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";

export default function OmniPayGateway() {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  const [isProcessing, setIsProcessing] = useState(false);
  const [status, setStatus] = useState<"pending" | "scanning" | "success" | "failed">("pending");
  
  const amount = searchParams.get("amount") || "0";
  const licenses = searchParams.get("licenses") || "";
  const sessionId = searchParams.get("session_id") || "";

  // Animasi Inisialisasi
  useEffect(() => {
    setTimeout(() => {
       if (status === "pending") setStatus("scanning");
    }, 1500);
  }, [status]);

  const handlePay = () => {
    setIsProcessing(true);
    setStatus("scanning");
    
    // Simulasi X-RAY Vision AI validasi pembayaran
    setTimeout(() => {
      setStatus("success");
      setTimeout(() => {
        router.push(`/id/admin?payment=success&session_id=${sessionId}`);
      }, 2000);
    }, 3000);
  };

  const handleCancel = () => {
    router.push(`/id/admin?payment=cancel`);
  };

  const formattedAmount = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(Number(amount));

  return (
    <div className="min-h-screen bg-[#050B14] flex items-center justify-center p-4 relative overflow-hidden font-sans">
      {/* Background Kuantum */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-[#050B14] to-[#050B14]"></div>
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#00ff88]/5 pointer-events-none"></div>
      
      <div className="relative z-10 w-full max-w-md bg-black/60 backdrop-blur-2xl border border-blue-500/30 rounded-3xl p-8 shadow-[0_0_50px_rgba(59,130,246,0.15)]">
        
        {/* Header */}
        <div className="text-center mb-10">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-900 mb-4 shadow-[0_0_30px_rgba(37,99,235,0.5)]">
            <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
          <h1 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300 tracking-tight">
            OMNIPAY X
          </h1>
          <p className="text-blue-400/60 text-sm mt-1 uppercase tracking-widest font-semibold">Sovereign Financial Vault</p>
        </div>

        {/* Invoice Card */}
        <div className="bg-white/5 border border-white/10 rounded-2xl p-6 mb-8 relative overflow-hidden group hover:border-blue-500/50 transition-colors duration-500">
          <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-all duration-500"></div>
          
          <div className="flex justify-between items-center mb-6">
            <span className="text-gray-400 text-sm">Sesi Otorisasi</span>
            <span className="text-xs font-mono text-blue-400 bg-blue-500/10 px-2 py-1 rounded border border-blue-500/20">
              {sessionId.substring(0, 12).toUpperCase()}
            </span>
          </div>
          
          <div className="mb-6">
            <p className="text-gray-500 text-xs uppercase tracking-wider mb-1">Upgrade Infrastruktur</p>
            <p className="text-white font-medium text-lg">{licenses.split(',').join(' & ')}</p>
          </div>
          
          <div className="pt-6 border-t border-white/10 flex justify-between items-end">
            <span className="text-gray-400 text-sm">Total Tagihan</span>
            <span className="text-3xl font-bold text-white tracking-tight">{formattedAmount}</span>
          </div>
        </div>

        {/* Action Engine */}
        {status === "success" ? (
          <div className="text-center p-6 bg-green-500/10 border border-green-500/30 rounded-2xl">
            <div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-3">
              <svg className="w-6 h-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 className="text-green-400 font-bold text-lg mb-1">Otorisasi Kuantum Berhasil</h3>
            <p className="text-green-400/70 text-sm">Lisensi sedang disuntikkan ke simpul Alpha...</p>
          </div>
        ) : (
          <div className="space-y-4">
            <button 
              onClick={handlePay}
              disabled={isProcessing}
              className={`w-full py-4 rounded-xl font-bold text-white shadow-lg transition-all duration-300 relative overflow-hidden ${
                isProcessing 
                ? "bg-blue-900/50 cursor-not-allowed border border-blue-500/30" 
                : "bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 border border-transparent shadow-blue-500/20 hover:shadow-blue-500/40 transform hover:-translate-y-0.5"
              }`}
            >
              {isProcessing ? (
                <div className="flex items-center justify-center gap-3">
                  <svg className="animate-spin h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  <span className="tracking-wide">Memproses Transmisi Kriptografis...</span>
                </div>
              ) : (
                <span className="tracking-wider">OTORISASI PEMBAYARAN</span>
              )}
            </button>
            
            <button 
              onClick={handleCancel}
              disabled={isProcessing}
              className="w-full py-3 rounded-xl font-medium text-gray-400 hover:text-white hover:bg-white/5 transition-colors text-sm tracking-wide"
            >
              Batalkan Sesi
            </button>
          </div>
        )}

        {/* Footer */}
        <div className="mt-8 text-center flex items-center justify-center gap-2 text-xs text-gray-600">
          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <span className="uppercase tracking-widest">Diamankan oleh JUMPA.ID Zero-Knowledge Engine</span>
        </div>

      </div>
    </div>
  );
}