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

const Guida: NextPage = () => {
  const { t } = useTranslation();

  return (
    <>
      <Head>
        <title>{t.heads.guida_titolo}</title>
        <meta name="description" content={t.heads.main_description} />
      </Head>
      <main className="mx-auto w-full max-w-6xl px-2 py-5 md:px-8">
        <div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm">
          {t.guida}
        </div>

        <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 text-center">
          <div className="space-y-2">
            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
              {t.faq.titolo}
            </h2>
            <p className="text-muted-foreground mx-auto max-w-[600px] 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, index) => (
              <Button
                key={index}
                variant="ghost"
                className="justify-start text-lg font-semibold"
                onClick={() => handleScroll(`faq-${item.id}`)}
              >
                {item.label}
              </Button>
            ))}
          </div>
          <div className="flex w-full flex-col gap-5">
            {t.faq.domande.map((item, index) => (
              <Accordion
                type="single"
                collapsible
                key={index}
                //defaultValue="0"
                className="relative w-full rounded-lg bg-neutral-50 p-4"
              >
                <div className="absolute -top-16" id={`faq-${item.id}`} />
                <h3 className="text-2xl font-semibold">{item.label}</h3>
                <div className="flex flex-col gap-1">
                  {item.qas.map((f, i) => (
                    <AccordionItem value={i.toString()} key={i}>
                      <AccordionTrigger className="text-left">
                        {f.title}
                      </AccordionTrigger>
                      <AccordionContent>
                        <p className="leading-relaxed">{f.description}</p>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </div>
              </Accordion>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
