"use client";

import { useState, useEffect, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { Target } from "lucide-react";
import ReactMarkdown from 'react-markdown';

type UkkTabsProps = {
    ukk: any;
    anggota: any[];
    proker: any[];
};

function TabHandler({ setActiveTab }: { setActiveTab: (tab: string) => void }) {
    const searchParams = useSearchParams();
    const tabParam = searchParams.get("tab");

    useEffect(() => {
        if (tabParam && ["deskripsi", "profil", "proker"].includes(tabParam)) {
            setActiveTab(tabParam);
        }
    }, [tabParam, setActiveTab]);

    return null;
}

export function UkkTabs({ ukk, anggota, proker }: UkkTabsProps) {
    const [activeTab, setActiveTab] = useState("deskripsi");

    const tabs = [
        { id: "deskripsi", label: "Deskripsi" },
        { id: "profil", label: "Profil Anggota" },
        { id: "proker", label: "Program Kerja" },
    ];

    const accentGradient = 'from-blue-500 to-indigo-500';
    const accentTextHover = 'hover:text-blue-400';
    const accentBg = 'bg-blue-500';

    const handleTabChange = (tabId: string) => {
        setActiveTab(tabId);
        window.history.replaceState(null, "", `?tab=${tabId}`);
    };

    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={handleTabChange} />
            </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={() => handleTabChange(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 ${accentGradient}`}></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-xl relative overflow-hidden">

                {/* 1. DESKRIPSI */}
                {activeTab === "deskripsi" && (
                    <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
                        <div className="max-w-4xl mx-auto">
                            <div className="bg-white/10 backdrop-blur-2xl p-8 md:p-12 rounded-[2rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] border border-white/20 hover:border-white/30 transition-all duration-500 relative overflow-hidden group">
                                <div className="relative z-10 prose prose-lg prose-invert max-w-none prose-headings:text-white prose-p:text-white prose-li:text-white prose-a:text-blue-400 hover:prose-a:text-blue-300 prose-strong:text-white prose-em:text-white text-white">
                                    <ReactMarkdown>{ukk.deskripsi || "*Deskripsi belum tersedia.*"}</ReactMarkdown>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* 2. PROFIL ANGGOTA */}
                {activeTab === "profil" && (
                    <div className="animate-in fade-in slide-in-from-bottom-8 duration-700 min-h-screen">
                        <div className="text-center space-y-4 mb-16 mx-auto max-w-2xl relative">
                            <span className="inline-block py-1.5 px-4 rounded-full bg-white/10 text-gray-300 text-xs font-bold tracking-widest uppercase mb-4 border border-white/20 backdrop-blur-md">Struktur Organisasi</span>
                            <h2 className="text-4xl md:text-5xl font-sans font-black text-white">{ukk.nama}</h2>
                            <div className={`absolute top-0 right-10 w-20 h-20 ${accentBg}/20 rounded-full blur-2xl`}></div>
                        </div>

                        {anggota.length > 0 ? (
                            <div className="flex flex-wrap justify-center gap-8 md:gap-12 relative z-10 w-full px-4 md:px-0">
                                {anggota.map((p) => (
                                    <div key={p.id} className="w-full max-w-[260px] sm:max-w-[300px] flex flex-col items-center">
                                        <div className="relative w-full aspect-[3/4] bg-white/5 rounded-2xl shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] border border-white/20 overflow-hidden group hover:-translate-y-2 hover:border-white/30 backdrop-blur-md transition-all duration-300">
                                            <img 
                                                src={p.fotoUrl || '/avatar-placeholder.png'} 
                                                alt={p.nama} 
                                                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" 
                                            />
                                        </div>

                                        <div className="text-center mt-5 px-3">
                                            <h4 className="text-base sm:text-lg font-bold text-white leading-tight">{p.jabatan}</h4>
                                            <p className="text-sm font-semibold text-gray-300 mt-2">{p.nama}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className="text-center py-20 text-gray-400">
                                Belum ada pengurus yang ditambahkan.
                            </div>
                        )}
                    </div>
                )}

                {/* 3. PROGRAM KERJA */}
                {activeTab === "proker" && (
                    <div className="animate-in fade-in slide-in-from-bottom-8 duration-700">
                        {proker.length > 0 ? (
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
                                {proker.map((prog, idx) => (
                                    <div
                                        key={prog.id}
                                        className="group relative bg-white/10 backdrop-blur-2xl p-8 md:p-12 rounded-[2rem] shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] border border-white/20 hover:border-white/30 hover:-translate-y-1 transition-all duration-500 flex flex-col gap-6 overflow-hidden"
                                    >
                                        <div className="relative z-10 flex flex-col gap-6 items-start">
                                            <div className="flex items-center gap-4 w-full">
                                                <div className="w-12 h-12 rounded-2xl flex items-center justify-center shadow-[0_4px_16px_rgba(0,0,0,0.2)] bg-white/10 border border-white/20 text-white group-hover:bg-white/20 transition-colors duration-300">
                                                    <Target className="w-6 h-6" />
                                                </div>
                                                <div className="flex-1">
                                                    <span className="text-xs font-bold text-gray-400 uppercase tracking-widest">Program {(idx + 1).toString().padStart(2, '0')}</span>
                                                    <h3 className={`text-xl font-bold leading-tight text-white transition-colors ${accentTextHover}`}>
                                                        {prog.judul}
                                                    </h3>
                                                </div>
                                            </div>

                                            <p className="text-gray-300 leading-relaxed text-sm whitespace-pre-line text-justify font-medium">
                                                {prog.deskripsi}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className="text-center py-20 text-gray-400">
                                Belum ada program kerja yang ditambahkan.
                            </div>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
}