import React from 'react';
// Asumsi path layout dan Inertia/React hooks sudah benar
import AdminKampusLayout from '@/Layouts/AdminKampusLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faArrowLeft, faSave, faCog // Menggunakan faCog untuk Sistem Perkuliahan
} from '@fortawesome/free-solid-svg-icons';
import Swal from 'sweetalert2';

// ========================================================================
// --- Komponen Utama: Sistem Perkuliahan Create Page ---
// ========================================================================

/**
 * @param {object} props
 * @param {object} props.auth
 * @param {object} props.errors - Errors validasi dari Laravel
 */
export default function SistemPerkuliahanCreate({ auth, errors }) {
    
    const { data, setData, post, processing } = useForm({
        name: '', 
        description: '',
        // Hapus field 'image_file' karena Sistem Perkuliahan diasumsikan tidak memiliki gambar
        is_active: true, // Default aktif
    });

    // Hapus imageRef karena tidak ada input file

    // --- Form Handlers ---

    const submit = (e) => {
        e.preventDefault();

        // Tampilkan konfirmasi sebelum submit
        Swal.fire({
            title: 'Konfirmasi Simpan',
            text: "Apakah Anda yakin data fitur sistem perkuliahan sudah benar dan ingin disimpan?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#4F46E5', // indigo-600
            cancelButtonColor: '#EF4444',  // red-500
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Post data ke endpoint store
                // Mengganti rute fasilitas menjadi sistem_perkuliahan
                post(route('admin.kampus.sistem_perkuliahan.store'), {
                    // Penanganan notifikasi setelah submit
                    onSuccess: () => {
                        // Setelah berhasil, reset form fields
                        setData({
                            name: '',
                            description: '',
                            is_active: true,
                        });
                        Swal.fire('Berhasil!', 'Fitur sistem perkuliahan baru telah berhasil ditambahkan.', 'success');
                    },
                    onError: (errors) => {
                        console.error("Gagal menyimpan fitur sistem perkuliahan:", errors);
                        Swal.fire('Gagal!', 'Terjadi kesalahan saat menyimpan data. Periksa kembali input Anda.', 'error');
                    },
                    // Penting: forceFormData dihilangkan atau diset false karena tidak ada file upload
                });
            }
        });
    };
    
    // Hapus helper previewUrl karena tidak ada gambar

    return (
        <AdminKampusLayout
            user={auth.user}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Tambah Fitur Sistem Perkuliahan Baru</h2>}
        >
            <Head title="Tambah Fitur Sistem Perkuliahan" />

            <div className="max-w-4xl mx-auto sm:px-6 lg:px-8 py-12">
                <div className="bg-white overflow-hidden shadow-xl sm:rounded-xl p-8">

                    {/* Header dan Tombol Kembali */}
                    <div className="flex justify-between items-center mb-6 border-b pb-4">
                        <h3 className="text-xl font-bold text-gray-800 flex items-center">
                            {/* Mengganti ikon dan warna */}
                            <FontAwesomeIcon icon={faCog} className="mr-3 text-indigo-600" />
                            Formulir Fitur Sistem Perkuliahan Baru
                        </h3>
                        <Link
                            // Mengganti rute fasilitas menjadi sistem_perkuliahan
                            href={route('admin.kampus.sistem_perkuliahan.index')}
                            className="inline-flex items-center px-4 py-2 bg-gray-200 border border-transparent rounded-lg font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-300 transition duration-150"
                        >
                            <FontAwesomeIcon icon={faArrowLeft} className="w-3 h-3 mr-2" />
                            Kembali ke Daftar
                        </Link>
                    </div>

                    <form onSubmit={submit} className="space-y-6">
                        
                        {/* 1. Nama Fitur */}
                        <div>
                            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                                Nama Fitur <span className="text-red-500">*</span>
                            </label>
                            <input
                                id="name"
                                type="text"
                                value={data.name}
                                onChange={(e) => setData('name', e.target.value)} 
                                // Mengganti warna fokus ring
                                className={`mt-1 block w-full border ${errors.name ? 'border-red-500' : 'border-gray-300'} rounded-lg shadow-sm p-3 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150`}
                                required
                            />
                            {errors.name && <p className="mt-2 text-sm text-red-600">{errors.name}</p>}
                        </div>

                        {/* 2. Deskripsi Fitur */}
                        <div>
                            <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
                                Deskripsi <span className="text-red-500">*</span>
                            </label>
                            <textarea
                                id="description"
                                value={data.description}
                                onChange={(e) => setData('description', e.target.value)}
                                rows="3"
                                // Mengganti warna fokus ring
                                className={`mt-1 block w-full border ${errors.description ? 'border-red-500' : 'border-gray-300'} rounded-lg shadow-sm p-3 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150`}
                                required
                            />
                            {errors.description && <p className="mt-2 text-sm text-red-600">{errors.description}</p>}
                        </div>

                        {/* 3. HILANG: Input Gambar dihilangkan
                        */}

                        {/* 4. Status Aktif */}
                        <div className="flex items-center">
                            <input
                                id="is_active"
                                type="checkbox"
                                checked={data.is_active}
                                onChange={(e) => setData('is_active', e.target.checked)}
                                // Mengganti warna checkbox
                                className="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                            />
                            <label htmlFor="is_active" className="ml-2 block text-sm font-medium text-gray-700">
                                Aktif (Tampilkan di halaman publik)
                            </label>
                            {errors.is_active && <p className="mt-2 text-sm text-red-600">{errors.is_active}</p>}
                        </div>
                        
                        {/* Tombol Aksi */}
                        <div className="flex justify-end pt-4 border-t mt-6">
                            <button
                                type="submit"
                                disabled={processing}
                                // Mengganti warna tombol
                                className={`inline-flex items-center px-6 py-3 border border-transparent rounded-lg font-semibold text-sm uppercase tracking-widest transition ease-in-out duration-150 shadow-md justify-center ${
                                    processing ? 'bg-indigo-400 cursor-not-allowed' : 'bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300'
                                }`}
                            >
                                <FontAwesomeIcon icon={faSave} className="w-4 h-4 mr-2" />
                                {processing ? 'Menyimpan...' : 'Simpan Fitur'}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </AdminKampusLayout>
    );
}