"use client";

import { useState, useEffect, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Linkedin, Instagram, PlayCircle, Sparkles, Users } from "lucide-react";

// Sub-component to handle search params safely within Suspense
function TabHandler({ setActiveTab }: { setActiveTab: (tab: string) => void }) {
    const searchParams = useSearchParams();
    const tabParam = searchParams.get("tab");

    useEffect(() => {
        if (tabParam && ["sejarah", "lambang", "mars", "ukk"].includes(tabParam)) {
            setActiveTab(tabParam);
        }
    }, [tabParam, setActiveTab]);

    return null;
}

export function ProfileTabs({ profil }: { profil: any }) {
    const [activeTab, setActiveTab] = useState("sejarah");
    const [activeUkkTab, setActiveUkkTab] = useState("khauf");

    const tabs = [
        { id: "sejarah", label: "Sejarah Singkat" },
        { id: "lambang", label: "Lambang HMF" },
        { id: "mars", label: "Mars & Hymne" },
    ];

    return (
        <div className="w-full relative z-20 -mt-10 md:-mt-16 container px-4 flex flex-col items-center">
            <Suspense fallback={null}>
                <TabHandler setActiveTab={setActiveTab} />
            </Suspense>
            {/* Tab Navigation */}
            <div className="flex flex-wrap bg-white/5 backdrop-blur-md rounded-t-2xl overflow-hidden border-b border-white/10 justify-center w-full max-w-5xl shadow-[0_8px_32px_0_rgba(0,0,0,0.1)]">
                {tabs.map((tab) => (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id)}
                        className={`px-4 sm:px-6 md:px-10 py-5 font-bold text-sm transition-colors flex-1 md:flex-none text-center relative ${activeTab === tab.id
                            ? "bg-white/10 text-white"
                            : "text-gray-400 hover:text-white hover:bg-white/10"
                            }`}
                    >
                        {activeTab === tab.id && <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>}
                        {tab.label}
                    </button>
                ))}
            </div>

            {/* Tab Content Container */}
            <div className="bg-white/5 border border-white/20 w-full max-w-5xl rounded-b-2xl md:rounded-tr-none shadow-[0_8px_32px_0_rgba(0,0,0,0.37)] p-6 md:p-12 min-h-[50vh] backdrop-blur-2xl relative z-10">
                
                {/* TAB 1: SEJARAH SINGKAT */}
                {activeTab === "sejarah" && (
                    <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 relative z-10">
                        <div className="max-w-4xl mx-auto flex flex-col gap-12 lg:gap-16 items-center">

                            {/* Left Content */}
                            <div className="space-y-6 flex flex-col items-center text-center w-full">
                                <h2 className="text-4xl md:text-5xl font-sans font-bold text-white leading-tight">
                                    Sejarah Berdirinya<br />
                                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">HMF FPMIPA UPI</span>
                                </h2>
                                <div className="w-16 h-1.5 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full mb-6"></div>

                                <div className="space-y-4 text-gray-300 leading-relaxed text-sm md:text-base text-justify w-full">
                                    <p className="whitespace-pre-wrap">
                                        {profil?.sejarah_p1 || "Himpunan Mahasiswa Fisika yang sekarang dikenal ternyata memiliki sejarah yang menarik dan patut kita ketahui. Tanggal pasti berdirinya masih dalam pembicaraan, namun dari beberapa sumber dan alumni maka sejarah singkat berdirinya HMF adalah sebagai berikut."}
                                    </p>
                                    <p className="whitespace-pre-wrap">
                                        {profil?.sejarah_p2 || "Himpunan pertama kali lahir dilatar belakangi oleh sekumpulan mahasiswa fisika yang melaksanakan aktifitas positif selain aktifitas kuliah. Dari beberapa pemikiran, akhirnya dibentuklah sebuah wadah yang disebut Persatuan Mahasiswa Fisika yang disingkat PERMAF pada tanggal 30 Juni 1954. Organisasi ini memiliki tujuan yang mulia yaitu untuk mewadahi mahasiswa fisika dan membantu mahasiswa fisika baik dalam bidang akademik maupun sosial."}
                                    </p>
                                </div>
                            </div>

                            {/* Cards / Bottom Content */}
                            <div className="space-y-8 w-full mt-4">
                                {/* Card 1 */}
                                <div className="bg-white/10 p-8 md:p-10 rounded-2xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] relative overflow-hidden border border-white/20 backdrop-blur-xl">
                                    <div className="absolute top-0 left-0 w-1.5 h-full bg-blue-500"></div>
                                    <p className="text-gray-300 leading-relaxed text-sm md:text-base text-justify whitespace-pre-wrap relative z-10">
                                        {profil?.sejarah_card1 || "Dari tahun-ketahun organisasi ini menunjukkan eksistensinya sebagai organisasi yang lahir dari penjelmaan aspirasi mahasiswa dan melaksanakan kegiatan untuk mahasiswa."}
                                    </p>
                                </div>

                                {/* Card 2 (Navy Accent) */}
                                <div className="bg-gradient-to-br from-[#0a1930] to-[#1a365d] border border-indigo-900/50 p-8 md:p-10 rounded-2xl shadow-xl relative overflow-hidden group hover:border-indigo-500/50 transition-colors">
                                    <p className="text-gray-200 leading-relaxed text-sm relative z-10 text-justify font-light whitespace-pre-wrap">
                                        {profil?.sejarah_card2 || "Untuk mengetahui perkembangan HMF FPMIPA UPI masa kini, dapat dilihat melalui website dan akun media sosial aktifnya."}
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                )}

                {/* TAB 2: LAMBANG HMF */}
                {activeTab === "lambang" && (
                    <div className="animate-in fade-in zoom-in-95 duration-700 max-w-6xl mx-auto relative z-10">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl md:text-5xl font-sans font-bold text-white mb-4">Makna Lambang <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">HMF</span></h2>
                            <p className="text-gray-300 max-w-2xl mx-auto text-lg text-center mt-2 whitespace-pre-wrap">
                                {profil?.lambang_desc || "Lambang HMF FPMIPA UPI terdiri dari berbagai bagian yang mempunyai maksud sebagai berikut :"}
                            </p>
                        </div>

                        <div className="flex flex-col gap-12 lg:gap-16 items-center">
                            {/* Logo Display - Top Centered */}
                            <div className="w-full flex flex-col items-center relative">
                                <div className="w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 relative group">
                                    <div className="absolute inset-0 bg-white/10 backdrop-blur-xl rounded-full shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] border border-white/20 flex items-center justify-center p-8 z-10 transform group-hover:-translate-y-2 transition-transform duration-500">
                                        {/* eslint-disable-next-line @next/next/no-img-element */}
                                        <img src="/logo.png" alt="Logo HMF" className="w-full h-full object-contain transform group-hover:scale-105 transition-transform duration-500" />
                                    </div>
                                </div>
                                <div className="mt-12 relative z-20">
                                    <a href="/logo.png" download>
                                        <button className="bg-blue-600 border border-blue-500 text-white hover:bg-blue-500 rounded-full px-8 py-3.5 font-bold transition-all flex items-center gap-3 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/40 hover:-translate-y-1 group/btn">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="group-hover/btn:animate-bounce"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>
                                            Unduh Lambang Resmi
                                        </button>
                                    </a>
                                </div>
                            </div>

                            {/* Meaning Lists Cards Grid */}
                            <div className="w-full relative z-10">
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                                    <div className="bg-white/10 p-8 rounded-3xl border border-white/20 hover:bg-white/15 transition-all hover:-translate-y-1 relative overflow-hidden group backdrop-blur-xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                        <h3 className="font-bold text-gray-200 text-xl mb-3 relative z-10 group-hover:text-white transition-colors">Tulisan & Lingkaran</h3>
                                        <p className="text-gray-300 leading-relaxed text-sm relative z-10 whitespace-pre-wrap">{profil?.lambang_tulisan || "Tulisan Himpunan Mahasiswa Fisika FPMIPA UPI dan singkatan HMF dalam lingkaran biru menunjukan nama organisasi."}</p>
                                        <div className="absolute -bottom-4 -right-4 text-white/5 font-sans font-bold text-7xl select-none">”</div>
                                    </div>

                                    <div className="bg-white/10 p-8 rounded-3xl border border-white/20 hover:bg-white/15 transition-all hover:-translate-y-1 relative overflow-hidden group backdrop-blur-xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                        <h3 className="font-bold text-gray-200 text-xl mb-3 relative z-10 group-hover:text-white transition-colors">Mahkota Segilima</h3>
                                        <p className="text-gray-300 leading-relaxed text-sm relative z-10 whitespace-pre-wrap">{profil?.lambang_mahkota || "Mahkota segilima warna putih bertepikan biru pada bentuk luar melambangkan menjalankan kegiatan berdasarkan Pancasila, UUD 1945, serta Tridharma PT."}</p>
                                        <div className="absolute -bottom-4 -right-4 text-white/5 font-sans font-bold text-7xl select-none">”</div>
                                    </div>

                                    <div className="bg-white/10 p-8 rounded-3xl border border-white/20 hover:bg-white/15 transition-all hover:-translate-y-1 relative overflow-hidden group backdrop-blur-xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                        <h3 className="font-bold text-gray-200 text-xl mb-3 relative z-10 group-hover:text-white transition-colors">Lingkaran Biru Dalam</h3>
                                        <p className="text-gray-300 leading-relaxed text-sm relative z-10 whitespace-pre-wrap">{profil?.lambang_lingkaran || "Mempunyai arti bahwa kegiatan berlandaskan asas kekeluargaan, segala aspek pemecahan masalah diselesaikan secara musyawarah mufakat."}</p>
                                        <div className="absolute -bottom-4 -right-4 text-white/5 font-sans font-bold text-7xl select-none">”</div>
                                    </div>

                                    <div className="bg-white/10 p-8 rounded-3xl border border-white/20 hover:bg-white/15 transition-all hover:-translate-y-1 relative overflow-hidden group backdrop-blur-xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                        <h3 className="font-bold text-gray-200 text-xl mb-3 relative z-10 group-hover:text-white transition-colors">Sepasang Sayap</h3>
                                        <p className="text-gray-300 leading-relaxed text-sm relative z-10 whitespace-pre-wrap">{profil?.lambang_sayap || "Berwarna putih berarti memiliki bidang-bidang dengan tugasnya masing-masing akan tetapi saling membantu mencapai tujuan."}</p>
                                        <div className="absolute -bottom-4 -right-4 text-white/5 font-sans font-bold text-7xl select-none">”</div>
                                    </div>

                                    <div className="bg-white/10 p-8 rounded-3xl border border-white/20 hover:bg-white/15 transition-all hover:-translate-y-1 relative overflow-hidden group backdrop-blur-xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                        <h3 className="font-bold text-gray-200 text-xl mb-3 relative z-10 group-hover:text-white transition-colors">Lintasan Elektron Merah</h3>
                                        <p className="text-gray-300 leading-relaxed text-sm relative z-10 whitespace-pre-wrap">{profil?.lambang_elektron || "Berarti HMF memiliki sifat dinamis dan aktif sesuai dengan peraturan dan hukum yang berlaku dan dapat dipertanggungjawabkan."}</p>
                                        <div className="absolute -bottom-4 -right-4 text-white/5 font-sans font-bold text-7xl select-none">”</div>
                                    </div>

                                    <div className="bg-white/10 p-8 rounded-3xl border border-white/20 hover:bg-white/15 transition-all hover:-translate-y-1 relative overflow-hidden group backdrop-blur-xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                        <h3 className="font-bold text-gray-200 text-xl mb-3 relative z-10 group-hover:text-white transition-colors">Segitiga Terbalik Merah</h3>
                                        <p className="text-gray-300 leading-relaxed text-sm relative z-10 whitespace-pre-wrap">{profil?.lambang_segitiga || "Mengarah ke bawah berarti HMF memiliki dasar yang kuat dengan akar yang kokoh sehingga mantap walaupun mendapat tantangan."}</p>
                                        <div className="absolute -bottom-4 -right-4 text-white/5 font-sans font-bold text-7xl select-none">”</div>
                                    </div>

                                </div>

                                {/* Arti Warna - Modernized */}
                                <div className="mt-10 bg-white/10 rounded-3xl p-8 lg:p-10 border border-white/20 relative overflow-hidden pt-12 backdrop-blur-2xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)]">
                                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>
                                    <h3 className="text-2xl font-sans font-bold text-white mb-8 text-center">Simbolik Warna</h3>

                                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
                                        <div className="flex flex-col items-center text-center group">
                                            <div className="w-12 h-12 rounded-full bg-blue-600 mb-4 shadow-lg shadow-blue-500/20 group-hover:scale-110 transition-transform"></div>
                                            <h4 className="font-bold text-white mb-2">Biru</h4>
                                            <p className="text-gray-400 text-sm leading-relaxed whitespace-pre-wrap">{profil?.warna_biru || "HMF dijiwai semangat pengabdian yang tinggi untuk mencapai tujuan mulia."}</p>
                                        </div>
                                        <div className="flex flex-col items-center text-center group">
                                            <div className="w-12 h-12 rounded-full bg-red-500 mb-4 shadow-lg shadow-red-500/20 group-hover:scale-110 transition-transform"></div>
                                            <h4 className="font-bold text-white mb-2">Merah</h4>
                                            <p className="text-gray-400 text-sm leading-relaxed whitespace-pre-wrap">{profil?.warna_merah || "Berarti HMF FPMIPA UPI memiliki energi yang sangat besar sebagai modal dalam beraktifitas."}</p>
                                        </div>
                                        <div className="flex flex-col items-center text-center group">
                                            <div className="w-12 h-12 rounded-full bg-white border border-gray-300 mb-4 shadow-md group-hover:scale-110 transition-transform"></div>
                                            <h4 className="font-bold text-white mb-2">Putih</h4>
                                            <p className="text-gray-400 text-sm leading-relaxed whitespace-pre-wrap">{profil?.warna_putih || "Memiliki keragaman potensi anggota yang berpadu untuk mencapai tujuan organisasi yang sama."}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* TAB 3: MARS & HYMNE */}
                {activeTab === "mars" && (
                    <div className="animate-in fade-in slide-in-from-right-8 duration-700 max-w-6xl mx-auto relative z-10">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl md:text-5xl font-sans font-bold text-white">Mars dan Hymne</h2>
                            <div className="w-16 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 mx-auto mt-6 rounded-full"></div>
                        </div>

                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
                            {/* Mars */}
                            <div className="relative group">
                                <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-900 rounded-[2.5rem] transform -rotate-2 group-hover:-translate-y-2 group-hover:-rotate-3 transition-all duration-500 shadow-[0_0_50px_rgba(59,130,246,0.3)] opacity-80"></div>
                                <div className="relative bg-white/5 backdrop-blur-2xl p-10 md:p-14 rounded-[2.5rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] border border-white/20 flex flex-col h-full z-10 transform group-hover:-translate-y-2 transition-transform duration-500">
                                    <div className="absolute top-8 right-8 text-white/10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" /></svg>
                                    </div>
                                    <h3 className="text-3xl md:text-4xl font-sans font-bold text-white mb-2">Mars HMF</h3>
                                    <p className="text-xs md:text-sm font-bold text-gray-400 mb-6 uppercase tracking-widest">Ciptaan : {profil?.mars_ciptaan || "Doni Nurdiansyah"}</p>

                                    <div className="text-base md:text-lg font-sans italic text-gray-300 leading-loose flex-1 mb-8">
                                        <p className="whitespace-pre-wrap">{profil?.mars_lirik || `Kibarkan bakti di jiwa\nMembangun HMF tercinta\nSemangatkan tekad dihati\nUntuk fisika UPI\n\nAyo bergerak\nAyo membangun\nWujudkan cita cinta mu untuk fisika\nBulatkan hati tuk raih prestasi\nBersama di fisika UPI`}</p>
                                    </div>

                                    <a href="https://youtu.be/xTKOQEZwEgg" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-full font-bold text-sm tracking-wide hover:bg-blue-500 transition-colors self-start shadow-md hover:shadow-lg hover:-translate-y-0.5 group/btn">
                                        <PlayCircle className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
                                        Dengarkan di YouTube
                                    </a>
                                </div>
                            </div>

                            {/* Hymne */}
                            <div className="relative group">
                                <div className="absolute inset-0 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-[2.5rem] transform rotate-2 group-hover:-translate-y-2 group-hover:rotate-3 transition-all duration-500 shadow-[0_0_50px_rgba(99,102,241,0.3)] opacity-80"></div>
                                <div className="relative bg-white/5 backdrop-blur-2xl p-10 md:p-14 rounded-[2.5rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.3)] border border-white/20 flex flex-col h-full z-10 transform group-hover:-translate-y-2 transition-transform duration-500">
                                    <div className="absolute top-8 right-8 text-white/10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" /></svg>
                                    </div>
                                    <h3 className="text-3xl md:text-4xl font-sans font-bold text-white mb-2">Hymne HMF</h3>
                                    <p className="text-xs md:text-sm font-bold text-gray-400 mb-6 uppercase tracking-widest">Ciptaan : {profil?.hymne_ciptaan || "Doni Nurdiansyah"}</p>

                                    <div className="text-base md:text-lg font-sans italic text-gray-300 leading-loose flex-1 mb-8">
                                        <p className="whitespace-pre-wrap">{profil?.hymne_lirik || `Fisika bumi siliwangi\nTempat ku bernaung dan berdiri\nCerahkan negeri bakti ibu pertiwi\nFisika jayalah dihati\n\nFisika bumi siliwangi\nTempatku meraih prestasi\nKibarkan panji harumkan negeri\nFisika Jayalah di hati`}</p>
                                    </div>

                                    <a href="https://youtu.be/jCrs_U4pZr4" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-full font-bold text-sm tracking-wide hover:bg-indigo-500 transition-colors self-start shadow-md hover:shadow-lg hover:-translate-y-0.5 group/btn">
                                        <PlayCircle className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
                                        Dengarkan di YouTube
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}