import React from 'react';
// PENTING: Menggunakan komponen asli Inertia (Head dan Link)
import { Head, Link } from '@inertiajs/react'; 
// IMPOR LAYOUT ASLI: Menggunakan komponen AuthenticatedLayout yang sudah dimodifikasi
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';


// =================================================================
// 1. INLINE ICONS (TIDAK BERUBAH)
// =================================================================
const IconBuilding = <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a2 2 0 012-2h2a2 2 0 012 2v5m-8 0h8"></path></svg>;
const IconUserPlus = <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3M6 21v-2a4 4 0 014-4h4a4 4 0 014 4v2m-6-10V7a4 4 0 00-8 0v2"></path></svg>;
const IconUsers = <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H9a1 1 0 01-1-1v-1a4 4 0 014-4h4a4 4 0 014 4v1a1 1 0 01-1 1zm-1-8a4 4 0 00-4-4H8a4 4 0 00-4 4v1a1 1 0 001 1h8a1 1 0 001-1v-1z"></path></svg>;
const IconCheck = <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>;


// =================================================================
// 2. INLINE COMPONENTS: StatCard (TIDAK BERUBAH)
// =================================================================
const StatCard = ({ title, value, icon, color = 'indigo' }) => {
    let baseClasses = 'bg-white p-6 rounded-2xl shadow-xl transition-all duration-300 hover:shadow-2xl border-t-4';
    let colorMap = {
        indigo: 'border-indigo-500',
        green: 'border-green-500',
        yellow: 'border-yellow-500',
        red: 'border-red-500',
        purple: 'border-purple-500', 
    };
    let iconColor = `text-${color}-500`;

    return (
        <div className={`${baseClasses} ${colorMap[color]} transition-all duration-300 hover:shadow-2xl`}>
            <div className="flex items-center justify-between">
                <div>
                    <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">{title}</p>
                    <p className="mt-1 text-3xl font-extrabold text-gray-900">{value}</p>
                </div>
                <div className={`p-3 rounded-full ${iconColor} bg-gray-100`}>
                    {icon}
                </div>
            </div>
        </div>
    );
};

// =================================================================
// 3. MAIN COMPONENT: Dashboard Super Admin
// =================================================================

export default function Dashboard({ auth, user, statusPendaftaran }) {
    
    // FUNGSI ROUTE MOCK (digunakan untuk Link di Main Content)
    // Rute di AuthenticatedLayout (seperti logout, admin.super.dashboard)
    // diasumsikan sudah ada di window.route() global dari Ziggy.
    const route = (name) => {
        // Karena error Ziggy, kita kembalikan '#' untuk semua rute
        // di sini, kecuali jika Anda sudah mendefinisikannya di web.php
        return '#'; 
    };
    
    const summary = statusPendaftaran || {
        total_campuses: 0,
        totalPendaftar: 0,
        pendaftarBaru: 0,
        persentasePenerimaan: 0,
    };
    
    // Perbaikan: Menggunakan user dari props `user` yang dilewatkan
    const loggedInUser = auth.user;
    
    const totalCampuses = summary.total_campuses || 0; 
    const totalApplicants = summary.totalPendaftar || 0;
    const newApplicantsToday = summary.pendaftarBaru || 0;
    const acceptanceRate = summary.persentasePenerimaan || 0;

    return (
        <AuthenticatedLayout
            // Layout asli secara otomatis mengambil user dari Inertia props (auth.user)
            header={<h2 className="font-bold text-3xl text-gray-800 leading-tight">Dashboard Super Admin</h2>}
        >
            <Head title="Dashboard Super Admin" />

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    {/* Ringkasan Selamat Datang */}
                    <div className="bg-white overflow-hidden shadow-xl sm:rounded-2xl p-6 mb-8 border-l-4 border-red-500">
                        <h3 className="text-2xl font-semibold text-gray-700">Selamat Datang, {loggedInUser.name}!</h3>
                        <p className="mt-2 text-gray-500">
                            Anda masuk sebagai **{loggedInUser.role_name || 'User'}**. Di sini Anda dapat memantau dan mengelola seluruh sistem PMB Multi-Kampus.
                        </p>
                    </div>

                    {/* Kartu Ringkasan Data */}
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
                        <StatCard
                            title="Kampus Aktif"
                            value={totalCampuses.toLocaleString('id-ID')}
                            icon={IconBuilding}
                            color="red"
                        />
                        <StatCard
                            title="Pendaftar Baru (Hari Ini)"
                            value={newApplicantsToday.toLocaleString('id-ID')}
                            icon={IconUserPlus}
                            color="green"
                        />
                        <StatCard
                            title="Total Pendaftar"
                            value={totalApplicants.toLocaleString('id-ID')}
                            icon={IconUsers}
                            color="yellow"
                        />
                        <StatCard
                            title="Persentase Penerimaan"
                            value={`${acceptanceRate}%`}
                            icon={IconCheck}
                            color="indigo"
                        />
                    </div>
                    
                    {/* Bagian Manajemen Utama */}
                    <div className="mt-10 bg-white p-8 rounded-2xl shadow-xl">
                        <h3 className="text-xl font-bold text-gray-800 mb-6 border-b pb-3">Menu Administrasi Utama</h3>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            {/* LINK FIX: Menggunakan '#' untuk menghindari error Ziggy */}
                            <Link href="#" className="block p-5 bg-red-50 hover:bg-red-100 rounded-xl transition duration-200 border border-red-200 group">
                                <p className="text-lg font-bold text-red-700 group-hover:text-red-800">Manajemen Kampus</p>
                                <p className="text-sm text-gray-500 mt-1">Tambah, edit, dan kelola informasi dasar kampus.</p>
                            </Link>
                            {/* LINK FIX: Menggunakan '#' untuk menghindari error Ziggy */}
                            <Link href="#" className="block p-5 bg-green-50 hover:bg-green-100 rounded-xl transition duration-200 border border-green-200 group">
                                <p className="text-lg font-bold text-green-700 group-hover:text-green-800">Data Pendaftar Global</p>
                                <p className="text-sm text-gray-500 mt-1">Lihat dan proses semua data pendaftaran mahasiswa baru.</p>
                            </Link>
                            {/* LINK FIX: Menggunakan '#' untuk menghindari error Ziggy */}
                            <Link href="#" className="block p-5 bg-purple-50 hover:bg-purple-100 rounded-xl transition duration-200 border border-purple-200 group">
                                <p className="text-lg font-bold text-purple-700 group-hover:text-purple-800">Manajemen Pengguna</p>
                                <p className="text-sm text-gray-500 mt-1">Atur hak akses dan akun admin kampus.</p>
                            </Link>
                        </div>
                    </div>

                    {/* Catatan */}
                    <div className="mt-10 p-4 border-l-4 border-yellow-500 bg-yellow-50 rounded-lg text-sm text-gray-600">
                        <p className="font-semibold">Perhatian:</p>
                        <p>Semua tombol navigasi di dalam konten utama dashboard ini sementara diarahkan ke `#` untuk menghindari error **`Ziggy`** (`route admin.applicants.global is not in the route list`). Anda harus mendefinisikan rute-rute ini di **`routes/web.php`** dan memastikan Ziggy menyediakannya agar link dapat berfungsi dengan benar.</p>
                    </div>

                </div>
            </div>
        </AuthenticatedLayout>
    );
}