import React from 'react';
import LandingLayout from '@/Layouts/LandingLayout';
import { Head } from '@inertiajs/react'; 
import { motion } from 'framer-motion';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExclamationTriangle, faHome, faFileAlt } from '@fortawesome/free-solid-svg-icons';

/**
 * Halaman Not Found Tracer Study.
 * Ditampilkan jika ID Tracer Study yang diakses di URL tidak ditemukan di database.
 */
export default function TracerStudyNotFound({ campus, slug, errorMessage }) {
    // Tema default untuk Not Found: Merah/Kuning/Oranye
    const theme = {
        gradientFrom: 'from-orange-500', 
        gradientTo: 'to-red-600',
        primary: 'bg-red-600', // Warna utama untuk tombol aksi
        primaryHover: 'hover:bg-red-700',
    };

    // Pastikan campus.slug selalu ada untuk route landing
    const campusSlug = campus.slug || slug || 'default-slug';

    return (
        <LandingLayout campus={campus} title="Data Tidak Ditemukan">
            <Head title="Data Tidak Ditemukan" />

            {/* Header / Hero Section Error */}
            <header className={`relative py-24 sm:py-32 bg-gradient-to-r ${theme.gradientFrom} ${theme.gradientTo} overflow-hidden`}>
                 {/* Background pattern */}
                 <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 lg:translate-x-1/3" 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="2 4"/>
                     </svg>
                 </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ duration: 0.5 }}>
                        <FontAwesomeIcon icon={faExclamationTriangle} size="4x" className="text-red mx-auto mb-6 drop-shadow-lg"/>
                    </motion.div>
                    <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }}
                        className="text-4xl sm:text-6xl font-extrabold text-red tracking-tight drop-shadow-lg">
                        Mohon Maaf, Data Hilang!
                    </motion.h1>
                    <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.4 }}
                        className="mt-4 text-xl text-white max-w-3xl mx-auto drop-shadow-md p-4 bg-black/10 rounded-xl"
                        dangerouslySetInnerHTML={{ __html: errorMessage }}
                    />
                </div>
            </header>

            {/* Konten Utama - Aksi */}
            <div className="py-16 sm:py-24 bg-gray-50 text-center">
                <h2 className="text-3xl font-bold text-gray-900 mb-10">
                    Periksa Link atau Coba Tindakan Berikut:
                </h2>
                <motion.div 
                    initial={{ opacity: 0 }} 
                    whileInView={{ opacity: 1 }} 
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: 0.6 }}
                >
                    <a 
                        href={route('tracerStudy.create', { slug: campusSlug })} 
                        className={`inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white ${theme.primary} ${theme.primaryHover} rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 mr-4`}
                    >
                        <FontAwesomeIcon icon={faFileAlt} className="mr-3 h-6 w-6" />
                        Isi Ulang Formulir
                    </a>
                    <a 
                        href={route('campus.show', { slug: campusSlug })} 
                        className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-gray-700 bg-white hover:bg-gray-100 rounded-full shadow-lg border border-gray-300 transform transition-all duration-300 hover:scale-105"
                    >
                        <FontAwesomeIcon icon={faHome} className="mr-3 h-6 w-6" />
                        Kembali ke Halaman Utama
                    </a>
                </motion.div>
            </div>
        </LandingLayout>
    );
}
