import type { NextPage } from "next";
import Head from "next/head";
import { ComeFunziona } from "~/components/come_funziona";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "~/components/ui/accordion";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { useTranslation } from "~/providers/I18nProvider";

/**
 * Pagina guida: /guida
 */
const Guida: NextPage = () => {
	const { t } = useTranslation();

	return (
		<>
			<Head>
				<title>{t.heads.guida_titolo}</title>
				<meta content={t.heads.main_description} name="description" />
			</Head>
			<main className="mx-auto w-full max-w-8xl px-2 py-5 md:px-8">
				<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
					{t.guida}
				</Badge>

				<ComeFunziona />
				<FAQSection />
			</main>
		</>
	);
};
export default Guida;

const FAQSection = () => {
	const { t } = useTranslation();

	const handleScroll = (id: string) => {
		document.getElementById(id)?.scrollIntoView({
			behavior: "smooth",
		});
		window.history.replaceState({}, "", `${window.location.pathname}#${id}`);
	};

	if (!t.faq?.domande) {
		return null; // Ensure translations are loaded before rendering
	}

	return (
		<section className="px-4 py-12 md:px-6" id="faq">
			<div className="mx-auto grid max-w-5xl items-center gap-6 py-12">
				<div className="flex flex-col justify-center space-y-4">
					<div className="space-y-2">
						<h2 className="font-bold text-3xl tracking-tighter md:text-4xl">
							{t.faq.titolo}
						</h2>
						<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
							{t.faq.descrizione}
						</p>
					</div>
				</div>

				<div className="flex w-full max-w-6xl justify-between gap-5">
					<div className="hidden flex-col gap-5 md:flex">
						{t.faq.domande.map((item) => (
							<Button
								className="justify-start font-semibold text-lg"
								key={item.id}
								onClick={() => handleScroll(`faq-${item.id}`)}
								variant="ghost"
							>
								{item.label}
							</Button>
						))}
					</div>
					<div className="flex w-full flex-col gap-5">
						{t.faq.domande.map((item) => (
							<Accordion
								className="relative w-full rounded-lg bg-muted p-4"
								collapsible
								key={`accordion-${item.id}`}
								//defaultValue="0"
								type="single"
							>
								<div className="absolute -top-16" id={`faq-${item.id}`} />
								<h3 className="font-semibold text-2xl">{item.label}</h3>
								<div className="flex flex-col gap-1">
									{item.qas.map((f, i) => (
										<AccordionItem
											className="border-b dark:border-muted-foreground/50"
											key={`accordion-item-${item.id}-${
												// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
												i
											}`}
											value={i.toString()}
										>
											<AccordionTrigger className="cursor-pointer text-left">
												{f.title}
											</AccordionTrigger>
											<AccordionContent>
												<p className="leading-relaxed">{f.description}</p>
											</AccordionContent>
										</AccordionItem>
									))}
								</div>
							</Accordion>
						))}
					</div>
				</div>
			</div>
		</section>
	);
};
