"use client";
import { useState } from 'react';
import { PricingCard } from '@/features/growth/PricingCard';

declare global {
  interface Window {
    snap: any;
  }
}

export default function PremiumPage() {
  const [isLoading, setIsLoading] = useState(false);

  const handlePayment = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/tokenize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });
      
      const data = await response.json();
      
      if (data.token) {
        window.snap.pay(data.token, {
          onSuccess: function (result: any) {
            alert("Pembayaran sukses! Terima kasih sudah berlangganan Premium.");
            window.location.href = "/dashboard";
          },
          onPending: function (result: any) {
            alert("Menunggu pembayaran Anda...");
          },
          onError: function (result: any) {
            alert("Pembayaran gagal. Silakan coba lagi.");
          },
          onClose: function () {
            alert('Anda menutup jendela pembayaran tanpa menyelesaikannya.');
          }
        });
      } else {
        alert("Gagal mendapatkan token dari server.");
      }
    } catch (error) {
      console.error(error);
      alert("Terjadi kesalahan sistem.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <main className="min-h-screen bg-white flex flex-col justify-center items-center px-6 py-20">
      <div className="text-center max-w-2xl mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          Buka Semua Kosakata
        </h1>
        <p className="text-lg text-gray-600">
          Dapatkan akses penuh ke 7.404 kosakata dari level A1 hingga C2. Investasi sekali untuk belajar seumur hidup.
        </p>
      </div>

      <div className="w-full max-w-sm mb-8">
        <PricingCard 
          regularPrice={39900} 
          promoPrice={14900} 
          promoActive={true} 
        />
      </div>
      
      <div className="w-full max-w-sm flex flex-col items-center">
         <button 
          onClick={handlePayment} 
          disabled={isLoading}
          className="w-full py-3 px-6 text-center text-white bg-blue-600 hover:bg-blue-700 font-bold rounded-lg transition-colors disabled:bg-blue-300 disabled:cursor-not-allowed mb-3 flex justify-center items-center gap-2"
        >
          {isLoading ? (
            <>
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
              <span>Memproses...</span>
            </>
          ) : (
            "Bayar Sekarang"
          )}
        </button>
        <p className="text-sm text-gray-500">
          🔒 Pembayaran aman melalui Midtrans
        </p>
      </div>
    </main>
  );
}