'use client';

import { Play } from 'lucide-react';
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import { Program } from '@/types/models';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';

import { useMemo } from 'react';

export function Curriculum({ program, sessions, groupId }: { program: Program, sessions?: any[], groupId?: string }) {
    const t = useTranslations();

    // Extract modules from sessions
    const modules = useMemo(() => {
        if (!sessions || sessions.length === 0) return [];
        return sessions
            .filter((item: any) => item.model === "module")
            .sort((a: any, b: any) => (a.order || 0) - (b.order || 0));
    }, [sessions]);

    // If we have modules with sessions, show them
    if (modules.length > 0 && groupId) {
        return (
            <div className="w-full">
                <h2 className="text-3xl font-bold mb-6">{t("programs.curriculum")}</h2>

                <Accordion
                    type="single"
                    collapsible
                    className="w-full space-y-3"
                    defaultValue="item-0"
                >
                    {modules.map((module: any, index: number) => {
                        const allSessions = module.session_groups || [];

                        if (allSessions.length === 0) return null;

                        return (
                            <AccordionItem
                                key={module.id}
                                value={`item-${index}`}
                                className="border border-gray-200 rounded-lg overflow-hidden"
                            >
                                <AccordionTrigger className="w-full bg-purple-600 hover:bg-purple-700 text-white px-6 py-4 hover:no-underline [&[data-state=open]>svg]:rotate-180 [&_svg]:text-white">
                                    <div className="flex items-center justify-between w-full">
                                        <h3 className="font-semibold">{module.title}</h3>
                                        <div className="flex items-center gap-2 text-sm">
                                            <span>{allSessions.length} {t("programs.lectures")}</span>
                                        </div>
                                    </div>
                                </AccordionTrigger>

                                <AccordionContent className="bg-gray-50 p-0">
                                    {allSessions.map((session: any, sessionIndex: number) => {
                                        const isFree = session.is_free === 1;
                                        const hasVideo = session.join_url;
                                        const showPreview = isFree && hasVideo;
                                        
                                        return showPreview ? (
                                            <Link
                                                key={session.id}
                                                href={`/dashboard/programs/fullscreen-${groupId}?session=${session.id}&preview=true`}
                                                className="border-b border-gray-200 last:border-b-0 px-6 py-4 flex items-start gap-3 hover:bg-gray-100 transition-colors cursor-pointer"
                                            >
                                                <div className="size-8 rounded-full bg-purple-600 flex items-center justify-center flex-shrink-0 mt-1">
                                                    <Play className="size-4 text-white fill-white" />
                                                </div>
                                                <div className="flex-1">
                                                    <h4 className="text-gray-900 font-medium">
                                                        {session.topic || session.title || `Session ${sessionIndex + 1}`}
                                                    </h4>
                                                    {session.duration && (
                                                        <p className="text-sm text-gray-600 mt-1">
                                                            {session.duration} {t("programs.min")}
                                                        </p>
                                                    )}
                                                </div>
                                                <span className="text-purple-600 text-sm font-semibold mt-1">
                                                    {t("programs.preview")}
                                                </span>
                                            </Link>
                                        ) : (
                                            <div
                                                key={session.id}
                                                className="border-b border-gray-200 last:border-b-0 px-6 py-4 flex items-start gap-3"
                                            >
                                                <div className="size-8 rounded-full bg-gray-800 flex items-center justify-center flex-shrink-0 mt-1">
                                                    <Play className="size-4 text-white fill-white" />
                                                </div>
                                                <div className="flex-1">
                                                    <h4 className="text-gray-900 font-medium">
                                                        {session.topic || session.title || `Session ${sessionIndex + 1}`}
                                                    </h4>
                                                    {session.duration && (
                                                        <p className="text-sm text-gray-600 mt-1">
                                                            {session.duration} {t("programs.min")}
                                                        </p>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </AccordionContent>
                            </AccordionItem>
                        );
                    })}
                </Accordion>
            </div>
        );
    }

    // No modules available
    return (
        <div className="w-full">
            <h2 className="text-3xl font-bold mb-6">{t("programs.curriculum")}</h2>
            <p className="text-gray-600">{t("programs.no curriculum")}</p>
        </div>
    );
}