import { useState } from 'react';
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';

export type WelcomeFaqItem = {
    id: number;
    question: string;
    answer: string;
};

export type WelcomeFaqCategory = {
    id: number;
    name: string;
    items: WelcomeFaqItem[];
};

export type WelcomeFaq = {
    title: string;
    subtitle: string;
    supportLabel: string;
    supportUrl: string;
    categories: WelcomeFaqCategory[];
};

type FaqSectionProps = {
    faq: WelcomeFaq;
};

export function FaqSection({ faq }: FaqSectionProps) {
    const [activeCategoryId, setActiveCategoryId] = useState(
        () => faq.categories[0]?.id.toString() ?? '',
    );
    const [openItemId, setOpenItemId] = useState<string | undefined>(() =>
        faq.categories[0]?.items[0]?.id.toString(),
    );

    const handleCategoryChange = (value: string) => {
        setActiveCategoryId(value);

        const category = faq.categories.find(
            (entry) => entry.id.toString() === value,
        );
        setOpenItemId(category?.items[0]?.id.toString());
    };

    if (faq.categories.length === 0) {
        return null;
    }

    return (
        <section className="bg-muted/30 px-6 py-16">
            <div className="mx-auto max-w-4xl">
                <h2 className="text-center text-3xl font-bold tracking-tight">
                    {faq.title}
                </h2>
                <p className="mx-auto mt-3 max-w-2xl text-center text-muted-foreground">
                    {faq.subtitle}
                </p>

                <Tabs
                    value={activeCategoryId}
                    onValueChange={handleCategoryChange}
                    className="mt-10"
                >
                    <TabsList className="mx-auto flex h-auto w-fit flex-wrap justify-center gap-2 bg-transparent p-0">
                        {faq.categories.map((category) => (
                            <TabsTrigger
                                key={category.id}
                                value={category.id.toString()}
                                className={cn(
                                    'rounded-lg px-4 py-2 text-muted-foreground data-active:bg-background data-active:text-foreground data-active:shadow-sm',
                                )}
                            >
                                {category.name}
                            </TabsTrigger>
                        ))}
                    </TabsList>

                    {faq.categories.map((category) => (
                        <TabsContent
                            key={category.id}
                            value={category.id.toString()}
                            className="mt-8"
                        >
                            <Accordion
                                type="single"
                                collapsible
                                value={openItemId}
                                onValueChange={setOpenItemId}
                                className="flex flex-col gap-3"
                            >
                                {category.items.map((item) => (
                                    <AccordionItem
                                        key={item.id}
                                        value={item.id.toString()}
                                        className="overflow-hidden rounded-xl border bg-background px-5 not-last:border-b-0"
                                    >
                                        <AccordionTrigger className="py-5 hover:no-underline">
                                            {item.question}
                                        </AccordionTrigger>
                                        <AccordionContent>
                                            <div
                                                className="tiptap-content text-muted-foreground"
                                                dangerouslySetInnerHTML={{
                                                    __html: item.answer,
                                                }}
                                            />
                                        </AccordionContent>
                                    </AccordionItem>
                                ))}
                            </Accordion>
                        </TabsContent>
                    ))}
                </Tabs>

                <p className="mt-10 text-center text-sm text-muted-foreground">
                    Didn&apos;t find the answer you are looking for?{' '}
                    <a
                        href={faq.supportUrl}
                        className="font-semibold text-foreground hover:underline"
                    >
                        {faq.supportLabel}
                    </a>
                </p>
            </div>
        </section>
    );
}