'use client';

import React from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import ReactMarkdown from 'react-markdown';

type AcaraTab = {
    id: string;
    judul: string;
    deskripsi: string;
    gambarUrl: string | null;
    gambarPosisi: string;
    urutan: number;
};

export default function AcaraTabs({ tabs }: { tabs: AcaraTab[] }) {
    const router = useRouter();
    const searchParams = useSearchParams();
    const currentTabId = searchParams.get('tab');

    if (!tabs || tabs.length === 0) {
        return null; // No tabs to show
    }

    // Default to the first tab if none selected or if selected tab is invalid
    const activeTab = tabs.find(t => t.id === currentTabId) || tabs[0];

    const handleTabChange = (tabId: string) => {
        const params = new URLSearchParams(searchParams.toString());
        params.set('tab', tabId);
        router.push(`?${params.toString()}`, { scroll: false });
    };

    return (
        <div className="w-full relative z-20 -mt-10 md:-mt-16 container px-4 flex flex-col items-center">
            {/* 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) => {
                    const isActive = activeTab.id === tab.id;
                    return (
                        <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 ${isActive
                                ? "bg-white/10 text-white"
                                : "text-white/80 hover:text-white hover:bg-white/10"
                                }`}
                        >
                            {isActive && <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>}
                            {tab.judul}
                        </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">
                
                {activeTab.gambarPosisi === 'atas' && activeTab.gambarUrl && (
                    <div className="w-full mb-8 rounded-2xl overflow-hidden bg-black/40 border border-white/10">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img src={activeTab.gambarUrl} alt={activeTab.judul} className="w-full h-auto object-cover max-h-[500px]" />
                    </div>
                )}

                {activeTab.gambarPosisi === 'tengah' && activeTab.gambarUrl ? (
                    <>
                        <div className="text-white 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">
                            <ReactMarkdown>{(activeTab.deskripsi || '').split('\n\n').slice(0, Math.ceil((activeTab.deskripsi || '').split('\n\n').length / 2)).join('\n\n')}</ReactMarkdown>
                        </div>
                        <div className="w-full my-8 rounded-2xl overflow-hidden bg-black/40 border border-white/10">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img src={activeTab.gambarUrl} alt={activeTab.judul} className="w-full h-auto object-cover max-h-[500px]" />
                        </div>
                        <div className="text-white 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">
                            <ReactMarkdown>{(activeTab.deskripsi || '').split('\n\n').slice(Math.ceil((activeTab.deskripsi || '').split('\n\n').length / 2)).join('\n\n')}</ReactMarkdown>
                        </div>
                    </>
                ) : (
                    <div className="text-white 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">
                        <ReactMarkdown>{activeTab?.deskripsi || ''}</ReactMarkdown>
                    </div>
                )}

                {activeTab.gambarPosisi === 'bawah' && activeTab.gambarUrl && (
                    <div className="w-full mt-8 rounded-2xl overflow-hidden bg-black/40 border border-white/10">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img src={activeTab.gambarUrl} alt={activeTab.judul} className="w-full h-auto object-cover max-h-[500px]" />
                    </div>
                )}
            </div>
        </div>
    );
}