import React from 'react';
import LandingLayout from '@/Layouts/LandingLayout';
import { Head } from '@inertiajs/react';
import { motion } from 'framer-motion';

// --- Font Awesome Imports ---
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
    faMapMarkerAlt, 
    faPhoneAlt, 
    faEnvelope, 
    faTriangleExclamation 
} from '@fortawesome/free-solid-svg-icons';
import { 
    faWhatsapp, 
    faInstagram, 
    faLinkedinIn, 
    faFacebookF, 
    faYoutube,
    faXTwitter, // Ikon untuk Twitter/X
    faTiktok // Ikon untuk TikTok
} from '@fortawesome/free-brands-svg-icons';


/**
 * Komponen Halaman Kontak
 * Menyesuaikan dengan kunci socialMedia dari LandingPageController.php: 
 * facebook, instagram, linkedin, youtube, tiktok, dan menambahkan Twitter/X.
 */
export default function KontakPage({ campus, content }) {
    // --- 1. SETUP DATA DINAMIS & THEME FALLBACK ---

    const campusName = campus?.name || 'Nama Kampus';

    // Data default untuk contactInfo (non-sosmed)
    const defaultContactInfo = {
        address: 'Jl. Contoh Utama No. 123, Kota Pendidikan', 
        phone: '(021) 1234567',
        whatsappContact: '6281234567890',
        email: 'info@kampus.ac.id',
    };

    // Gabungkan contactInfo dasar dari props dengan default
    const baseContact = {
        ...defaultContactInfo,
        ...(campus?.contactInfo || {})
    };

    // Gabungkan data sosial media ke dalam object contactInfo. 
    // Ini menyesuaikan dengan kunci 'socialMedia' di LandingPageController.php
    const contactInfo = {
        ...baseContact,
        facebookUrl: campus?.socialMedia?.facebook || null,
        // Asumsi jika Twitter tidak ada, kita tetap cek
        twitterUrl: campus?.socialMedia?.twitter || null, 
        instagramUrl: campus?.socialMedia?.instagram || null,
        youtubeUrl: campus?.socialMedia?.youtube || null,
        linkedinUrl: campus?.socialMedia?.linkedin || null,
        tiktokUrl: campus?.socialMedia?.tiktok || null,
    };
    
    const mapEmbedUrl = campus?.mapEmbedUrl;
    
    const pageTitle = content?.title || 'Hubungi Kami';
    const pageDescription = content?.description || `Kami siap membantu Anda. Silakan hubungi kami melalui saluran resmi berikut.`;

    // Tema fallback dan destructuring
    const theme = campus?.theme || {
        primary: 'bg-indigo-600',
        primaryHover: 'hover:bg-indigo-700',
        gradientFrom: 'from-indigo-600',
        gradientTo: 'to-indigo-800',
        textColor: 'text-indigo-600',
        ringColor: 'focus:ring-indigo-500',
    };

    // Kelas Tailwind dinamis
    const textClass = theme.textColor.includes('text-') ? theme.textColor : `text-indigo-600`;
    const gradientClass = `${theme.gradientFrom} ${theme.gradientTo}`;

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


    // --- 2. KOMPONEN PEMBANTU ---
    
    /** * Komponen Kartu Informasi Kontak Dinamis */
    const ContactInfoCard = ({ icon, title, content, link }) => {
        const Wrapper = link && content && content !== '#' ? 'a' : 'div';

        let finalLink = link;
        if (title === "Lokasi Resmi" && content) {
            // Menggunakan format link Google Maps yang benar
            // Catatan: Pastikan encodeURIComponent sudah diimport atau digunakan dengan benar jika dibutuhkan.
            // Asumsi URL yang masuk ke 'content' sudah siap. Jika ingin menggunakan query pencarian:
             finalLink = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(content)}`;
             // Mengganti baris bermasalah sebelumnya:
             // finalLink = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(content)}`; 
        } else if (content === '#') {
             finalLink = null;
        }

        return (
            <Wrapper
                {...(finalLink && content && content !== '#' ? { href: finalLink, target: "_blank", rel: "noopener noreferrer" } : {})}
                className={`flex items-start p-4 space-x-4 bg-white rounded-xl shadow-lg transition duration-300 border border-gray-100 ${
                    finalLink && content && content !== '#' ? 'hover:shadow-xl transform hover:scale-[1.02] cursor-pointer' : 'opacity-80'
                }`}
            >
                <FontAwesomeIcon icon={icon} className={`w-8 h-8 ${textClass} flex-shrink-0 mt-1`} />
                <div>
                    <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
                    <p className="text-gray-600 break-words">
                        {content && content !== '#' ? content : 'Data tidak tersedia'}
                    </p>
                </div>
            </Wrapper>
        );
    };
    
    // Data Sosial Media disesuaikan dengan Controller
    const socialLinks = [
        { name: 'Facebook', icon: faFacebookF, url: contactInfo.facebookUrl, color: 'text-blue-600 hover:text-blue-800' },
        { name: 'Twitter (X)', icon: faXTwitter, url: contactInfo.twitterUrl, color: 'text-gray-900 hover:text-gray-700' }, 
        { name: 'Instagram', icon: faInstagram, url: contactInfo.instagramUrl, color: 'text-pink-600 hover:text-pink-800' },
        { name: 'YouTube', icon: faYoutube, url: contactInfo.youtubeUrl, color: 'text-red-600 hover:text-red-800' },
        { name: 'LinkedIn', icon: faLinkedinIn, url: contactInfo.linkedinUrl, color: 'text-blue-700 hover:text-blue-900' },
        { name: 'TikTok', icon: faTiktok, url: contactInfo.tiktokUrl, color: 'text-gray-900 hover:text-gray-700' }, 
    ];

    const SocialMediaSection = () => {
        // Filter: Hanya tampilkan ikon yang URL-nya TIDAK null (datanya ada, meskipun isinya '#')
        const presentLinks = socialLinks.filter(link => link.url !== null);

        // Jika tidak ada data sama sekali dari controller
        if (presentLinks.length === 0) {
            return (
                <div className="pt-6 mt-8 border-t border-gray-100">
                    <h3 className="text-xl font-semibold text-gray-500 mb-4">Media Sosial</h3>
                    <p className="text-gray-400 italic">Informasi media sosial belum dikonfigurasi di controller.</p>
                </div>
            );
        }

        return (
            <div className="pt-6 mt-8 border-t border-gray-100">
                <h3 className="text-xl font-semibold text-gray-800 mb-4">Ikuti Kami di Media Sosial</h3>
                <motion.div 
                    initial={{ opacity: 0, y: 20 }} 
                    whileInView={{ opacity: 1, y: 0 }} 
                    viewport={{ once: true }} 
                    transition={{ duration: 0.5, delay: 0.4 }}
                    className="flex space-x-6"
                >
                    {/* Render SEMUA link yang memiliki URL (termasuk yang berisi '#') */}
                    {presentLinks.map((link) => {
                        // Tentukan apakah link tersebut benar-benar dapat diakses (bukan '#')
                        const isAvailable = link.url && link.url !== '#';
                        const linkUrl = isAvailable ? link.url : '#'; // Tetap gunakan '#' jika belum diisi

                        return (
                            <a
                                key={link.name}
                                href={linkUrl}
                                target={isAvailable ? "_blank" : "_self"} // Buka di tab baru hanya jika tersedia
                                rel="noopener noreferrer"
                                onClick={(e) => {
                                    if (!isAvailable) e.preventDefault(); // Mencegah navigasi jika URL adalah '#'
                                }}
                                // Menambahkan opacity jika link tidak tersedia
                                className={`transition duration-300 transform hover:scale-110 ${link.color} ${!isAvailable ? 'opacity-50 cursor-default' : ''}`}
                                title={isAvailable ? `Kunjungi ${link.name} ${campusName}` : `${link.name} belum tersedia`}
                            >
                                <FontAwesomeIcon icon={link.icon} className="w-8 h-8" />
                            </a>
                        );
                    })}
                </motion.div>
            </div>
        );
    };

    // --- 3. RENDER UTAMA ---
    return (
        <LandingLayout campus={campus} title={`Kontak - ${campusName}`}>
            <Head title={`Kontak - ${campusName}`} />
            
            <div className="min-h-screen bg-gray-50 font-inter">
                
                {/* Header Halaman */}
                <header className={`relative py-24 sm:py-32 bg-gradient-to-r ${gradientClass} overflow-hidden`}>
                    {/* SVG 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>
                    {/* Header Content */}
                    <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"
                        >
                            {pageTitle}
                        </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"
                        >
                            {pageDescription}
                        </motion.p>
                    </div>
                </header>

                {/* Konten Utama: Detail Kontak & Peta (Dua Kolom) */}
                <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">
                        <motion.div 
                            initial={{ opacity: 0, y: 50 }} 
                            whileInView={{ opacity: 1, y: 0 }} 
                            viewport={{ once: true, amount: 0.2 }} 
                            transition={{ duration: 0.6 }}
                            className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16"
                        >

                            {/* Kolom Kiri: Kontak Langsung dan Sosial Media */}
                            <div className="space-y-8">
                                {/* Kontak Langsung (Telepon, WA, Email, Alamat) */}
                                <div>
                                    <h2 className={`text-3xl font-bold text-gray-900 border-b pb-3 border-gray-200 ${textClass}`}>Hubungi Langsung</h2>
                                    <div className="space-y-6 mt-6">
                                        <ContactInfoCard
                                            icon={faPhoneAlt}
                                            title="Telepon (Office Hour)"
                                            content={contactInfo.phone}
                                            link={contactInfo.phone ? `tel:${contactInfo.phone.replace(/[^0-9+]/g, '')}` : null}
                                        />
                                        <ContactInfoCard
                                            icon={faWhatsapp}
                                            title="Hubungi Via WhatsApp"
                                            content={contactInfo.whatsappContact ? `+${contactInfo.whatsappContact}` : 'Nomor WA tidak tersedia'}
                                            link={contactInfo.whatsappContact ? `https://wa.me/${contactInfo.whatsappContact}` : null}
                                        />
                                        <ContactInfoCard
                                            icon={faEnvelope}
                                            title="Email Resmi"
                                            content={contactInfo.email}
                                            link={contactInfo.email ? `mailto:${contactInfo.email}` : null}
                                        />
                                        <ContactInfoCard
                                            icon={faMapMarkerAlt}
                                            title="Lokasi Resmi"
                                            content={contactInfo.address}
                                        />
                                    </div>
                                </div>

                                {/* Sosial Media */}
                                <SocialMediaSection />
                            </div>

                            {/* Kolom Kanan: Embed Peta Lokasi */}
                            <div className="flex flex-col h-[550px] lg:h-auto min-h-[450px]"> 
                                <h2 className="text-3xl font-bold text-gray-900 border-b pb-3 border-gray-200 mb-6">Temukan Kami di Peta</h2>
                                <motion.div 
                                    initial={{ opacity: 0, scale: 0.9 }} 
                                    whileInView={{ opacity: 1, scale: 1 }} 
                                    viewport={{ once: true, amount: 0.2 }} 
                                    transition={{ duration: 0.6, delay: 0.2 }}
                                    className="rounded-xl overflow-hidden shadow-2xl border-4 border-white flex-grow"
                                >
                                    {mapEmbedUrl ? (
                                        <iframe
                                            src={mapEmbedUrl}
                                            width="100%"
                                            height="100%" 
                                            style={{ border: 0 }}
                                            allowFullScreen=""
                                            loading="lazy"
                                            referrerPolicy="no-referrer-when-downgrade"
                                            title={`Peta Lokasi ${campusName}`}
                                        ></iframe>
                                    ) : (
                                        <div className="flex flex-col items-center justify-center h-full w-full bg-gray-200 p-8 text-center">
                                            <FontAwesomeIcon icon={faTriangleExclamation} className="text-5xl text-gray-500 mb-3" />
                                            <p className="text-gray-700 font-bold mb-2">Peta Google Belum Dikonfigurasi</p>
                                            <p className="text-sm text-gray-500">Silakan hubungi administrator untuk menambahkan URL embed peta lokasi kampus.</p>
                                        </div>
                                    )}
                                </motion.div>
                            </div>

                        </motion.div>
                    </div>
                </div>
            </div>
        </LandingLayout>
    );
}