import React, { useState, useMemo, useEffect } from 'react';
import LandingLayout from '@/Layouts/LandingLayout';
import { Head, useForm } from '@inertiajs/react';
import { motion, AnimatePresence } from 'framer-motion';
import Swal from 'sweetalert2'; 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
    faCheck, faChevronRight, faChevronLeft, faBuildingColumns, faExclamationTriangle
} from '@fortawesome/free-solid-svg-icons';

export default function TracerStudyPage({ campus, slug, tracerStudy }) {
    const [currentStep, setCurrentStep] = useState(1);
    const totalSteps = 1; // Hanya satu langkah untuk formulir

    // Default theme atau mengambil dari campus
    const theme = campus?.theme || {
        gradientFrom: 'from-red-600',
        gradientTo: 'to-indigo-800',
        primary: 'bg-indigo-600',
        primaryHover: 'hover:bg-indigo-700',
        ring: 'ring-indigo-500'
    };

    const { data, setData, post, processing, errors, reset, wasSuccessful } = useForm({
        // Data TracerStudy
        campus_id: campus.id,
        jurusan_id: '',
        nama: '',
        email: '',
        foto: '',
        tahun_lulus: '',
        job: '',
        is_prestasi: false,
    });

    // Handle perubahan status pekerjaan
    const handleWorkStatusChange = (value) => {
        if (value === 'Belum') {
            setData('job', null);
        }
        setData('is_working', value);
    };

    const submit = (e) => {
        e.preventDefault();
        if (!data.job && data.is_working === 'Ya') {
            Swal.fire('Peringatan', 'Job harus diisi jika status pekerjaan adalah Ya', 'warning');
            return;
        }
        post(route('tracer-study.store', slug));
    };

    const backgroundPatternStyle = {
        backgroundColor: '#f8fafc', 
        backgroundImage: 'radial-gradient(circle at 1px 1px, #e2e8f0 0.5px, transparent 0)',
        backgroundSize: '20px 20px',
    };

    // Handle navigasi langkah formulir
    const handleNext = () => {
        setCurrentStep(1); // Karena hanya satu langkah formulir
    };

    const handlePrev = () => {
        setCurrentStep(1); // Hanya satu langkah, tidak ada prev
    };

    const renderStepContent = () => (
        <form onSubmit={submit} className="space-y-8">
            <div>
                <label className="block text-sm font-medium text-gray-700">Nama</label>
                <input 
                    type="text" 
                    value={data.nama}
                    onChange={(e) => setData('nama', e.target.value)}
                    className="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md"
                    required
                />
                {errors.nama && <div className="text-red-600 text-sm">{errors.nama}</div>}
            </div>

            <div>
                <label className="block text-sm font-medium text-gray-700">Email</label>
                <input 
                    type="email" 
                    value={data.email}
                    onChange={(e) => setData('email', e.target.value)}
                    className="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md"
                    required
                />
                {errors.email && <div className="text-red-600 text-sm">{errors.email}</div>}
            </div>

            <div>
                <label className="block text-sm font-medium text-gray-700">Status Pekerjaan</label>
                <div className="mt-2 flex space-x-4">
                    <label className="inline-flex items-center">
                        <input 
                            type="radio" 
                            name="is_working" 
                            value="Ya" 
                            checked={data.is_working === 'Ya'}
                            onChange={() => handleWorkStatusChange('Ya')}
                            className="form-radio text-indigo-500"
                        />
                        <span className="ml-2">Ya</span>
                    </label>
                    <label className="inline-flex items-center">
                        <input 
                            type="radio" 
                            name="is_working" 
                            value="Belum" 
                            checked={data.is_working === 'Belum'}
                            onChange={() => handleWorkStatusChange('Belum')}
                            className="form-radio text-indigo-500"
                        />
                        <span className="ml-2">Belum</span>
                    </label>
                </div>
            </div>

            {data.is_working === 'Ya' && (
                <div>
                    <label className="block text-sm font-medium text-gray-700">Job</label>
                    <input 
                        type="text" 
                        value={data.job}
                        onChange={(e) => setData('job', e.target.value)}
                        className="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md"
                    />
                    {errors.job && <div className="text-red-600 text-sm">{errors.job}</div>}
                </div>
            )}

            <div className="flex justify-between pt-6 border-t mt-8">
                {currentStep > 1 && (
                    <button
                        type="button"
                        onClick={handlePrev}
                        className="flex items-center px-6 py-2 bg-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-300 transition duration-150 shadow-md"
                        disabled={processing}
                    >
                        <FontAwesomeIcon icon={faChevronLeft} className="mr-2 h-4 w-4"/> Sebelumnya
                    </button>
                )}
                {currentStep < totalSteps && (
                    <button
                        type="button"
                        onClick={handleNext}
                        className={`${currentStep === 1 ? 'ml-auto' : ''} flex items-center px-6 py-2 ${theme.primary} text-white rounded-xl font-semibold ${theme.primaryHover} transition duration-150 shadow-md`}
                        disabled={processing}
                    >
                        Lanjutkan <FontAwesomeIcon icon={faChevronRight} className="ml-2 h-4 w-4"/>
                    </button>
                )}
                {currentStep === totalSteps && (
                    <button
                        type="submit" 
                        className={`ml-auto flex items-center px-6 py-2 ${theme.primary} text-white rounded-xl font-semibold ${theme.primaryHover} transition duration-150 shadow-lg disabled:bg-indigo-400`}
                        disabled={processing}
                    >
                        {processing ? 'Memproses...' : <>Kirim Pendaftaran <FontAwesomeIcon icon={faCheck} className="ml-2 h-4 w-4"/></>}
                    </button>
                )}
            </div>
        </form>
    );

    return (
        <LandingLayout campus={campus} title={`Tracer Study - ${campus.name}`}>
            <Head title={`Tracer Study - ${campus.name}`} />
            
            <header className={`relative py-24 sm:py-32 bg-gradient-to-r ${theme.gradientFrom} ${theme.gradientTo} overflow-hidden`}>
                <div className="absolute inset-0 opacity-10 mix-blend-overlay">
                    <svg className="absolute right-0 bottom-0 transform translate-x-1/2 translate-y-1/2" width="800" height="800" fill="none" viewBox="0 0 800 800">
                        <circle cx="400" cy="400" r="400" stroke="white" strokeWidth="0.5" />
                        <circle cx="400" cy="400" r="300" stroke="white" strokeWidth="0.5" strokeDasharray="5 10"/>
                    </svg>
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
                        className="text-4xl sm:text-6xl font-extrabold text-white tracking-tight drop-shadow-lg">
                        Tracer Study Alumni
                    </motion.h1>
                    <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }}
                        className="mt-4 text-xl text-gray-200 max-w-3xl mx-auto drop-shadow-md">
                        Partisipasi Anda membantu kami meningkatkan kualitas pendidikan dan relevansi lulusan.
                    </motion.p>
                </div>
            </header>

            <div className="relative py-16 sm:py-24" style={backgroundPatternStyle}>
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-20">
                    <section>
                        <h2 className="text-3xl font-bold text-center mb-12 text-slate-800">Formulir Tracer Study</h2>
                        <div className="bg-white p-6 rounded-xl shadow-lg border-l-4 border-r-4 border-transparent">
                            {renderStepContent()}
                        </div>
                    </section>
                </div>
            </div>
        </LandingLayout>
    );
}