import React, { useState, useEffect } from 'react';
import AdminKampusLayout from '@/Layouts/AdminKampusLayout';
import { Head, useForm, Link } from '@inertiajs/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faSave, faArrowLeft, faImage, faTimes, faUpload, faSitemap, faExclamationTriangle
} from '@fortawesome/free-solid-svg-icons';
import Swal from 'sweetalert2';

// ========================================================================
// --- Komponen Utama: StrukturOrganisasiEdit Page ---
// ========================================================================

/**
 * @param {{ auth: Object, errors: Object, organizationChart: Object }} props
 */
export default function StrukturOrganisasiEdit({ auth, errors, organizationChart }) {
    // ----------------------------------------------------
    // --- Setup Data & State ---
    // ----------------------------------------------------

    // Pastikan organizationChart tidak null/undefined
    const chartData = organizationChart || {}; 

    // Data awal yang digunakan untuk inisialisasi form
    const initialData = {
        title: chartData.title || '',
        // URL gambar lama dari backend (misalnya S3 URL)
        image_url_public: chartData.image_url_public || null, 
    };

    // State untuk pratinjau gambar baru yang di-upload
    const [imagePreview, setImagePreview] = useState(null);

    // Inertia useForm hook
    const { data, setData, post, processing, transform } = useForm({
        _method: 'put', // PENTING: Gunakan method PUT/PATCH untuk update di Laravel
        
        // Isi form dengan initialData
        title: initialData.title,
        
        // FIELD KHUSUS UNTUK FILE UPLOAD
        image_file: null, // Untuk file baru yang akan diunggah
        is_active: chartData.is_active ?? true, // Ambil status is_active yang sudah ada, default true
        remove_image: false, // Flag untuk memberi tahu backend agar menghapus gambar lama
        
        // Field ini hanya untuk mempertahankan URL gambar lama untuk ditampilkan di form (front-end only)
        current_image_url: initialData.image_url_public, 
    });

    const headerText = 'Edit Struktur Organisasi';
    
    // Transformasi data sebelum dikirim: memastikan file dikirim sebagai FormData
    transform((data) => ({
        ...data,
        // Hapus field yang tidak perlu dikirim ke Laravel (hanya untuk front-end use)
        current_image_url: undefined, 
        
        // Hanya kirim file jika ada file baru (instanceof File), jika tidak kirim null
        image_file: data.image_file instanceof File ? data.image_file : null,
        title: data.title || '',
    }));

    // Efek untuk membuat pratinjau saat image_file (file baru) berubah
    useEffect(() => {
        if (data.image_file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setImagePreview(reader.result);
            };
            // Baca file sebagai Data URL untuk pratinjau
            reader.readAsDataURL(data.image_file);
        } else {
            setImagePreview(null);
        }
    }, [data.image_file]);


    // ----------------------------------------------------
    // --- Handlers ---
    // ----------------------------------------------------
    
    // Handler umum untuk input non-file (text, checkbox)
    const handleInputChange = (e) => {
        const { name, value, type, checked } = e.target;
        setData(name, type === 'checkbox' ? checked : value);
    };

    // Handler UNTUK FILE GAMBAR
    const handleImageChange = (e) => {
        const file = e.target.files[0];
        setData(prevData => ({
            ...prevData,
            image_file: file || null,
            remove_image: false, // Batal hapus jika upload baru
        }));
        // Reset input file agar bisa upload file yang sama lagi jika dibatalkan/di-clear
        e.target.value = null;
    };
    
    // Handler untuk menampilkan SweetAlert konfirmasi hapus gambar
    const handleShowConfirmRemoveImage = () => {
        // Cek apakah ada gambar yang sedang ditampilkan (gambar lama atau pratinjau baru)
        if (!data.current_image_url && !data.image_file) {
            Swal.fire({
                icon: 'warning',
                title: 'Tidak Ada Gambar',
                text: 'Tidak ada gambar untuk dihapus pada saat ini.',
                confirmButtonColor: '#3B82F6',
            });
            return;
        }

        Swal.fire({
            title: 'Konfirmasi Hapus Gambar?',
            text: "Anda yakin ingin menghapus gambar struktur organisasi ini? (Ini akan disimpan permanen setelah Anda menekan Simpan Perubahan)",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#DC2626',
            cancelButtonColor: '#6B7280',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Panggil fungsi penghapusan setelah konfirmasi
                handleRemoveImageAction();
                Swal.fire(
                    'Dihapus Sementara!',
                    'Gambar berhasil dihapus dari pratinjau. Tekan "Simpan Perubahan" untuk menyimpan secara permanen.',
                    'success'
                );
            }
        });
    };

    // Aksi penghapusan gambar (mengatur state)
    const handleRemoveImageAction = () => {
        setData(prevData => ({
            ...prevData,
            current_image_url: null, // Hapus preview gambar lama
            image_file: null, // Pastikan tidak ada file baru yang tertinggal
            remove_image: true, // Set flag ke true
        }));
    }
    
    // Tentukan URL gambar yang akan ditampilkan: (Prioritas: file baru yang di-preview > URL lama dari data state)
    const currentImageUrl = imagePreview || data.current_image_url; 
    
    // Submit Form
    const submit = (e) => {
        e.preventDefault();
        
        // Cek jika ID organisasi tidak ada, hindari submit
        if (!organizationChart || !organizationChart.id) {
            Swal.fire({
                icon: 'error',
                title: 'Kesalahan ID!',
                text: 'ID Struktur Organisasi tidak ditemukan. Tidak dapat menyimpan perubahan.',
                confirmButtonColor: '#DC2626',
            });
            return;
        }

        // Gunakan PUT/PATCH ke route update dengan menyertakan ID
        post(route('admin.kampus.organisasi.update', organizationChart.id), { 
            forceFormData: true, // PENTING: Karena ada file upload
            // Catatan: Inertia secara default akan mengubah method POST ini menjadi PUT/PATCH di Laravel karena ada field _method: 'put'
            
            onSuccess: () => {
                // Flash message akan ditangani otomatis oleh Inertia/Laravel
            },
            onError: (err) => {
                console.error("Error submitting form:", err);
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'Terjadi kesalahan saat menyimpan data. Periksa kembali isian Anda.',
                    confirmButtonColor: '#DC2626',
                });
            }
        });
    };

    // ----------------------------------------------------
    // --- Render Component ---
    // ----------------------------------------------------

    return (
        // Gunakan Layout yang disediakan (misalnya AdminKampusLayout)
        <AdminKampusLayout
            user={auth.user}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">{headerText}</h2>}
        >
            <Head title={headerText} />

            <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 py-12">
                
                {/* Form Utama */}
                <form onSubmit={submit} className="bg-white overflow-hidden shadow-xl sm:rounded-lg p-8">
                    
                    {/* Header Formulir */}
                    <div className="flex justify-between items-center mb-8 border-b pb-4">
                        <h3 className="text-2xl font-bold text-indigo-700 flex items-center">
                            <FontAwesomeIcon icon={faSitemap} className="mr-3 w-6 h-6" />
                            {headerText}
                        </h3>
                        <div className="flex space-x-3">
                            {/* Tombol Kembali */}
                            <Link
                                href={route('admin.kampus.organisasi.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 ease-in-out duration-150 shadow-sm"
                            >
                                <FontAwesomeIcon icon={faArrowLeft} className="w-3 h-3 mr-2" />
                                Kembali
                            </Link>
                            {/* Tombol Simpan */}
                            <button
                                type="submit"
                                disabled={processing}
                                className={`inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-lg font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 transition ease-in-out duration-150 shadow-md ${processing ? 'opacity-75' : ''}`}
                            >
                                <FontAwesomeIcon icon={faSave} className="w-3 h-3 mr-2" />
                                {processing ? 'Menyimpan...' : 'Simpan Perubahan'}
                            </button>
                        </div>
                    </div>

                    {/* ======================= BAGIAN 1: INFORMASI DASAR ======================= */}
                    <h4 className="text-lg font-semibold text-gray-700 mb-4 border-l-4 border-indigo-500 pl-3">Detail Struktur Organisasi</h4>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        {/* Kolom Kiri: Judul */}
                        <div>
                            <div className="mb-4">
                                <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">Judul/Nama Struktur <span className="text-red-500">*</span></label>
                                <input
                                    id="title"
                                    type="text"
                                    name="title"
                                    value={data.title}
                                    onChange={handleInputChange}
                                    className={`w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${errors.title ? 'border-red-500' : ''}`}
                                />
                                {errors.title && <div className="text-xs text-red-600 mt-1">{errors.title}</div>}
                            </div>
                        </div>

                        {/* Kolom Kanan: Is Active */}
                        <div>
                            <div className="mb-4">
                                <label htmlFor="is_active" className="block text-sm font-medium text-gray-700 mb-2">Status Tampil</label>
                                <div className="flex items-center">
                                    <input
                                        id="is_active"
                                        type="checkbox"
                                        name="is_active"
                                        checked={data.is_active}
                                        onChange={handleInputChange}
                                        className="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                                    />
                                    <label htmlFor="is_active" className="ml-2 text-sm text-gray-900">
                                        Aktif (Tampilkan di halaman publik)
                                    </label>
                                </div>
                                {errors.is_active && <div className="text-xs text-red-600 mt-1">{errors.is_active}</div>}
                            </div>
                        </div>
                    </div>

                    {/* FIELD UPLOAD GAMBAR */}
                    <div className="mb-6 border p-4 rounded-lg bg-gray-50">
                        <label htmlFor="image_file" className="block text-sm font-medium text-gray-700 mb-2 flex items-center">
                            <FontAwesomeIcon icon={faImage} className="mr-2 w-3 h-3 text-gray-500" />
                            Upload Gambar (Bagan/Struktur Organisasi)
                            {data.current_image_url && !imagePreview && (
                                <span className="ml-2 text-xs text-indigo-600 italic font-normal">(Abaikan jika tidak ingin mengubah foto)</span>
                            )}
                        </label>
                        <div className="flex items-center space-x-3">
                            <input
                                id="image_file"
                                type="file"
                                name="image_file"
                                accept="image/*"
                                onChange={handleImageChange}
                                className={`w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 ${errors.image_file ? 'border-red-500' : ''}`}
                            />
                        </div>
                        {errors.image_file && <div className="text-xs text-red-600 mt-1">{errors.image_file}</div>}
                        
                        {/* Pratinjau Gambar & Tombol Hapus */}
                        {currentImageUrl ? (
                            <div className="mt-4 p-4 border border-gray-200 rounded-lg bg-white max-w-lg relative">
                                <p className="text-xs font-medium text-gray-600 mb-2">Pratinjau Gambar {imagePreview ? 'Baru' : 'Saat Ini'}:</p>
                                {/* Tampilkan gambar saat ini (URL lama atau pratinjau baru) */}
                                <img 
                                    src={currentImageUrl} 
                                    alt="Pratinjau Gambar Struktur Organisasi" 
                                    className="w-full h-auto rounded-lg object-contain max-h-80 border"
                                />
                                {/* Tombol Hapus Gambar */}
                                <button
                                    type="button"
                                    onClick={handleShowConfirmRemoveImage}
                                    className="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-700 transition shadow"
                                    title="Hapus Gambar"
                                >
                                    <FontAwesomeIcon icon={faTimes} className="w-3 h-3" />
                                </button>
                                <p className="text-xs text-indigo-600 mt-2">
                                    {imagePreview 
                                        ? 'Gambar ini akan diunggah sebagai pengganti.' 
                                        : data.remove_image
                                            ? 'Gambar ini akan dihapus saat Anda menekan Simpan Perubahan.' 
                                            : 'Ini adalah gambar yang sudah ada. Klik tombol silang di pojok kanan atas untuk menghapusnya.'
                                    }
                                </p>
                            </div>
                        ) : (
                            // Tampilan jika tidak ada gambar
                            <div className="mt-4 p-4 border border-dashed border-gray-300 rounded-lg bg-gray-100 text-center">
                                <FontAwesomeIcon icon={faUpload} className="w-6 h-6 text-gray-400 mb-2" />
                                <p className="text-sm text-gray-500">Belum ada gambar yang dipilih atau diunggah.</p>
                            </div>
                        )}
                        {/* Pesan error jika user mencoba menghapus gambar saat tidak ada gambar sama sekali */}
                        {errors.remove_image && <div className="text-xs text-red-600 mt-1">{errors.remove_image}</div>}
                    </div>
                    {/* AKHIR FIELD UPLOAD GAMBAR */}
                    
                    <div className="flex justify-end pt-4 border-t mt-8">
                        {/* Tombol Simpan di bagian bawah (diulang untuk kemudahan pengguna) */}
                        <button
                            type="submit"
                            disabled={processing}
                            className={`inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-lg font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 transition ease-in-out duration-150 shadow-md ${processing ? 'opacity-75' : ''}`}
                        >
                            <FontAwesomeIcon icon={faSave} className="w-3 h-3 mr-2" />
                            {processing ? 'Menyimpan...' : 'Simpan Perubahan'}
                        </button>
                    </div>

                </form>
            </div>
        </AdminKampusLayout>
    );
}
