import React, { useState } from 'react';
import { Head, usePage } from '@inertiajs/react';
import LandingLayout from '@/Layouts/LandingLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// ICON DARI PAKET SOLID-SVG-ICONS (Mayoritas ikon)
import { 
    faCheckCircle, 
    faCreditCard, 
    faReceipt, 
    faEnvelope,
    faUniversity,
    faUser, 
    faCopy, 
    faSpinner,
    faPhone
} from '@fortawesome/free-solid-svg-icons';

// ICON WHATSAPP DARI PAKET BRANDS-SVG-ICONS (Perbaikan untuk faWhatsapp)
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons'; 

import { motion } from 'framer-motion';

// --- HELPER FUNCTIONS ---

// Fungsi untuk format angka menjadi Rupiah (Rp 250.000)
const formatRupiah = (number) => {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0,
    }).format(number);
};

// --- KOMPONEN BANTUAN ---

// Komponen Tombol Copy
const CopyButton = ({ textToCopy, label }) => {
    const [isCopied, setIsCopied] = useState(false);
    const [isCopying, setIsCopying] = useState(false);

    const handleCopy = async () => {
        setIsCopying(true);
        try {
            await navigator.clipboard.writeText(textToCopy);
            setIsCopied(true);
            setTimeout(() => {
                setIsCopied(false);
                setIsCopying(false);
            }, 2000);
        } catch (err) {
            console.error('Gagal menyalin:', err);
            setIsCopying(false);
        }
    };

    return (
        <button
            onClick={handleCopy}
            disabled={isCopying}
            className={`flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
                isCopied
                    ? 'bg-green-500 text-white'
                    : 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200'
            }`}
        >
            <FontAwesomeIcon 
                icon={isCopying ? faSpinner : faCopy} 
                spin={isCopying} 
                className="mr-2"
            />
            {isCopied ? 'Tersalin!' : label}
        </button>
    );
};

// Komponen Info Baris
const InfoRow = ({ icon, label, value, isCopyable = false, textToCopy = '' }) => (
    <div className="flex items-start justify-between py-2 border-b border-gray-100 last:border-b-0">
        <div className="flex items-center text-gray-600">
            <FontAwesomeIcon icon={icon} className="mr-3 w-5 h-5 text-indigo-500" />
            <span className="font-medium">{label}</span>
        </div>
        <div className="flex items-center space-x-2">
            <span className={`text-right ${isCopyable ? 'font-mono' : 'font-semibold text-gray-800'}`}>
                {value}
            </span>
            {isCopyable && (
                <CopyButton textToCopy={textToCopy} label="Salin" />
            )}
        </div>
    </div>
);

// --- KOMPONEN UTAMA ---
export default function SuccessPO() {
    const { campus, pendaftar, rekeningInfo } = usePage().props;
    const whatsAppUrl = `https://wa.me/${rekeningInfo.contact_wa}?text=Halo%2C%20saya%20sudah%20melakukan%20pembayaran%20pendaftaran%20untuk%20No.%20Pendaftaran%20${pendaftar.no_pendaftaran}.%20Mohon%20proses%20konfirmasi%20pembayaran%20saya.%20Terima%20kasih.`;
    
    const initialBiaya = formatRupiah(pendaftar.biaya_pendaftaran || 0);

    return (
        // PASTIKAN PROPS 'campus' DIKIRIMKAN KE LANDINGLAYOUT
        <LandingLayout campus={campus} title={`Pendaftaran Sukses ${campus?.name}`}>
            <Head title="Pendaftaran Sukses" />
            
            <motion.div 
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="py-12 px-4 sm:px-6 lg:px-8 bg-gray-50 min-h-screen"
            >
                <div className="max-w-4xl mx-auto shadow-xl rounded-2xl overflow-hidden bg-white">
                    
                    {/* Header Sukses */}
                    <div className="text-center p-8 sm:p-12 bg-gradient-to-r from-indigo-500 to-blue-600 text-white">
                        <FontAwesomeIcon icon={faCheckCircle} className="w-16 h-16 mb-4 text-white" />
                        <h1 className="text-3xl font-extrabold sm:text-4xl">
                            Terima Kasih Telah Mendaftar!
                        </h1>
                        <p className="mt-2 text-indigo-100 text-lg">
                            Pendaftaran Anda berhasil dicatat. Kami telah mengirimkan email konfirmasi.
                        </p>
                    </div>

                    <div className="p-6 sm:p-10">
                        {/* Detail Pendaftar */}
                        <div className="mb-8 border border-gray-200 rounded-xl p-6 bg-white shadow-sm">
                            <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                                <FontAwesomeIcon icon={faReceipt} className="mr-3 text-indigo-500" />
                                No. Pendaftaran Anda
                            </h2>
                            <p className="text-4xl font-extrabold text-indigo-700 tracking-wider text-center py-4 bg-indigo-50 rounded-lg border border-indigo-200">
                                {pendaftar.no_pendaftaran}
                            </p>
                        </div>

                        {/* Rangkuman Pendaftaran */}
                        <div className="mb-8">
                            <h3 className="text-xl font-bold text-gray-700 mb-4">Rangkuman Data</h3>
                            <div className="bg-gray-50 p-4 rounded-lg">
                                <InfoRow icon={faUser} label="Nama Pendaftar" value={pendaftar.nama} />
                                <InfoRow icon={faUniversity} label="Program Studi" value={`${pendaftar.program_kuliah} - ${pendaftar.jurusan}`} />
                                <InfoRow icon={faEnvelope} label="Email Pribadi" value={pendaftar.email} />
                                <InfoRow icon={faPhone} label="Nomor HP" value={pendaftar.no_hp} />
                            </div>
                        </div>

                        {/* Detail Biaya Pendaftaran */}
                        <div className="mb-10 p-6 bg-yellow-50 border-2 border-yellow-300 rounded-xl">
                            <h3 className="text-xl font-bold text-yellow-800 mb-4 flex items-center">
                                <FontAwesomeIcon icon={faCreditCard} className="mr-3 text-yellow-600" />
                                Biaya Pendaftaran Awal
                            </h3>
                            <div className="flex justify-between items-center bg-white p-4 rounded-lg shadow-inner">
                                <span className="text-lg font-medium text-gray-700">Biaya Pendaftaran</span>
                                <span className="text-2xl font-bold text-indigo-600">{initialBiaya}</span>
                            </div>
                        </div>

                        {/* Rekening Pembayaran */}
                        <div className="mb-10 border border-indigo-200 rounded-xl p-6 bg-indigo-50">
                            <h3 className="text-xl font-bold text-indigo-800 mb-4">Rekening Pembayaran</h3>
                            <InfoRow label="Bank Tujuan" value={rekeningInfo.bank} />
                            <InfoRow 
                                label="Nomor Rekening" 
                                value={rekeningInfo.no_rekening} 
                                isCopyable 
                                textToCopy={rekeningInfo.no_rekening}
                            />
                            <InfoRow label="Atas Nama" value={rekeningInfo.atas_nama} />
                        </div>

                        {/* Cara Konfirmasi */}
                        <div className="text-center">
                            <h3 className="text-xl font-bold text-gray-700 mb-4">Konfirmasi Pembayaran</h3>
                            <p className="text-gray-600 mb-6">
                                Setelah transfer, segera konfirmasi pembayaran Anda melalui WhatsApp untuk proses verifikasi.
                            </p>
                            
                            <motion.a
                                whileHover={{ scale: 1.05 }}
                                whileTap={{ scale: 0.95 }}
                                href={whatsAppUrl}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center justify-center w-full sm:w-auto px-6 py-3 text-lg font-bold text-white bg-green-500 rounded-full shadow-lg hover:bg-green-600 transition-all duration-300"
                            >
                                <FontAwesomeIcon icon={faWhatsapp} className="mr-3 w-6 h-6" />
                                Konfirmasi Via WhatsApp
                            </motion.a>
                        </div>
                    </div>
                </div>
            </motion.div>
        </LandingLayout>
    );
}