'use client';

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

export function Topics({ program }: { program: Program }) {
    const t = useTranslations();
    const topics = program?.course_topics || [];
    const subitems = program?.course_topics_subitems || [];

    return (
        <div className="w-full">
            <h2 className="text-3xl font-bold mb-6">{t("programs.topics")}</h2>

            {topics.length > 0 ? (
                <Accordion
                    type="single"
                    collapsible
                    className="w-full space-y-3"
                    defaultValue="item-0"
                >
                    {topics.map((topic, index) => (
                        <AccordionItem
                            key={index}
                            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">{topic}</h3>
                                    {Array.isArray(subitems[index]) && subitems[index].length > 0 && (
                                        <div className="flex items-center gap-2 text-sm">
                                            <span>{subitems[index].length} {t("programs.lectures")}</span>
                                        </div>
                                    )}
                                </div>
                            </AccordionTrigger>

                            <AccordionContent className="bg-gray-50 p-0">
                                {Array.isArray(subitems[index]) && subitems[index].map((subitem, subIndex) => (
                                    <div
                                        key={subIndex}
                                        className="border-b border-gray-200 last:border-b-0 px-6 py-4 flex items-center gap-3 hover:bg-gray-100 transition-colors"
                                    >
                                        <div className="size-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-1">
                                            <CheckCircle className="size-4 text-purple-600" />
                                        </div>
                                        <div className="flex-1">
                                            <h4 className="text-gray-900 font-medium">
                                                {subitem}
                                            </h4>
                                        </div>
                                    </div>
                                ))}
                            </AccordionContent>
                        </AccordionItem>
                    ))}
                </Accordion>
            ) : (
                <p className="text-gray-600">{t("programs.no topics")}</p>
            )}
        </div>
    );
}