"use client";
import { Program } from "@/types/models";
import { useState } from "react";
import { useTranslations } from "next-intl";

import { cn } from "@/lib/cn";
import { Button } from "@/components/ui/button";

import { StudentsAlsoBought } from "./student-also-bought";

import { OverView } from "./tabs/overview";
import { Topics } from "./tabs/topics";
import { Curriculum } from "./tabs/curriculum";
import { Instructor } from "./tabs/instructor";
import { Reviews } from "./tabs/reviews";
import { QA } from "./tabs/qa";

export function ProgramTabDetails({ program, sessions, groupId }: { program: Program, sessions?: any[], groupId?: string }) {
    const [activeTab, setActiveTab] = useState("overview");
    const t = useTranslations();
    const tabs = [
        { id: 'overview', label: t('programs.overview'), component: <OverView program={program} /> },
        { id: 'topics', label: t('programs.topics'), component: <Topics program={program} /> },
        { id: 'curriculum', label: t('programs.curriculum'), component: <Curriculum program={program} sessions={sessions} groupId={groupId} /> },
        { id: 'instructor', label: t('programs.instructor'), component: <Instructor program={program} /> },
        { id: 'reviews', label: t('programs.reviews'), component: <Reviews program={program} /> },
        { id: 'qa', label: t('programs.qa'), component: <QA program={program} /> }
    ].filter(tab => {
        if (tab.id === 'topics') return (program?.course_topics || []).length > 0;
        if (tab.id === 'curriculum') return (sessions || []).some((s: any) => s.model === 'module');
        if (tab.id === 'instructor') return (program?.coaches || []).length > 0;
        if (tab.id === 'reviews') return true; // Always show reviews tab to allow dynamic ones and submission
        if (tab.id === 'qa') {
            return (program?.faqs || []).some(
                faq => faq?.question && faq?.answer &&
                    faq.question.trim() !== '' && faq.answer.trim() !== ''
            );
        }
        return true;
    });

    return (
        <div className="min-h-screen">
            <div className="box bg-white p-4 rounded-md border shadow-sm">

                <div className="flex gap-2 mb-8 flex-wrap sticky top-2 bg-white z-40 py-2">
                    {tabs.map((tab) => (
                        <Button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={cn("border uppercase",
                                activeTab === tab.id ?
                                    "bg-purple-600 text-white"
                                    : "bg-white text-gray-700 hover:bg-gray-100"
                            )}
                        >
                            {tab.label}
                        </Button>
                    ))}
                </div>

                {tabs.find(t => t.id === activeTab)?.component}

                 <div className="my-12">
                    <StudentsAlsoBought />
                </div> 

            </div>
        </div>
    );
};