import Head from "next/head";
import { useTranslation } from "~/providers/I18nProvider";
import type { NextPage } from "next";
import { AccordionComp } from "~/components/accordionComp";
import { api } from "~/utils/api";
import { LoadingPage } from "~/components/loading";
import { Status500 } from "~/components/status-page";
import { Separator } from "~/components/ui/separator";
import {
  PricingComponent,
  PricingComponentConsulenza,
} from "~/components/prezzi";
import { IconMatrix } from "~/components/IconComponents";
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";

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

  const { data: prezziario, isLoading } =
    api.prezziario.getPrezziPerTipologiaAll.useQuery();

  if (isLoading) {
    return <LoadingPage />;
  }
  if (!prezziario) {
    return <Status500 />;
  }

  const pricingTransitorio = prezziario.transitorio.saldi.map((s) => ({
    downPayment: prezziario.transitorio.acconto.prezzo_cent / 100,
    secondPayment: s.prezzo_cent / 100,
  }));

  const pricingStabile = prezziario.stabile.saldi.map((s) => ({
    downPayment: prezziario.stabile.acconto.prezzo_cent / 100,
    secondPayment: s.prezzo_cent / 100,
  }));

  return (
    <>
      <Head>
        <title>{t.heads.prezzi_titolo}</title>
        <meta name="description" content={t.heads.prezzi_description} />
      </Head>
      <section className="mx-auto 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.prezzi_titolo}
        </div>
        <div className="mt-5 space-y-14">
          <section
            className="mx-auto flex max-w-5xl flex-col items-center gap-8"
            id="transitorio"
          >
            <h1 className="text-4xl font-semibold">
              {t.prezzi.titolo_servizio_transitori}
            </h1>
            <PricingComponent
              cta={t.pricing_cmp.cta_breve}
              pricingData={pricingTransitorio}
              opzioni={[
                t.pricing_cmp.breve_option1,
                t.pricing_cmp.breve_option2,
                t.pricing_cmp.breve_option3,
                t.pricing_cmp.breve_option4,
                t.pricing_cmp.breve_option5,
              ]}
              statico
              className="border-transitorio bg-transitorio"
              title={t.prezzi.titolo_transitori}
              tipo={TipologiaPosizioneEnum.Transitorio}
            />

            <p>{t.prezzi.desc_transitori}</p>
            <div className="my-5">
              <ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
                {t.prezzi.cta_transitori.map((item, idx) => (
                  <li key={idx} className="flex gap-x-4">
                    <div className="flex size-12 flex-none items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                      <IconMatrix type={item.icon} />
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-gray-800">
                        {item.titolo}
                      </h4>
                      <p className="mt-3">{item.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            {/* <ConsulenzaServizio data={prezziario.transitorio} /> */}
            <AccordionComp
              texts={t.prezzi.faq_transitori}
              className="w-full max-w-full"
            />
          </section>
          <Separator className="my-5" />
          <section
            className="mx-auto flex max-w-5xl flex-col items-center gap-8"
            id="stabile"
          >
            <h1 className="text-4xl font-semibold">
              {t.prezzi.titolo_servizio_stabile}
            </h1>
            <PricingComponent
              cta={t.pricing_cmp.cta_stabile}
              pricingData={pricingStabile}
              opzioni={[
                t.pricing_cmp.stabile_option1,
                t.pricing_cmp.stabile_option2,
              ]}
              statico
              className="border-stabile bg-stabile"
              title={t.prezzi.titolo_stabile}
              tipo={TipologiaPosizioneEnum.Stabile}
            />
            <p>{t.prezzi.desc_stabile}</p>
            <div className="my-5">
              <ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
                {t.prezzi.cta_stabile.map((item, idx) => (
                  <li key={idx} className="flex gap-x-4">
                    <div className="flex size-12 flex-none items-center justify-center rounded-lg bg-orange-50 text-orange-600">
                      <IconMatrix type={item.icon} />
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-gray-800">
                        {item.titolo}
                      </h4>
                      <p className="mt-3">{item.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            {/* <ConsulenzaServizio data={prezziario.stabile} /> */}
            <AccordionComp
              texts={t.prezzi.faq_stabile}
              className="w-full max-w-full"
            />
          </section>
          <Separator className="my-5" />
          <section
            className="mx-auto flex max-w-5xl flex-col items-center gap-8"
            id="contratti"
          >
            <h1 className="text-4xl font-semibold">
              {t.prezzi.titolo_servizio_contratti}
            </h1>

            <PricingComponentConsulenza
              cta={t.pricing_cmp.cta_consulenza}
              pricingData={
                prezziario.consulenza?.map((s) => s.prezzo_cent / 100) || []
              }
              opzioni={[
                "Libero (4 + 4 anni)",
                "Agevolato (3 + 2 anni)",
                "Commerciale",
              ]}
              statico
              className="border-green-400 bg-green-400"
              title={t.prezzi.titolo_contratti}
            />
            <p>{t.prezzi.desc_contratti}</p>
            <div className="my-5">
              <ul className="grid gap-x-12 gap-y-8 sm:grid-cols-2 lg:grid-cols-2">
                {t.prezzi.cta_contratti.map((item, idx) => (
                  <li key={idx} className="flex gap-x-4">
                    <div className="flex size-12 flex-none items-center justify-center rounded-lg bg-green-50 text-green-600">
                      <IconMatrix type={item.icon} />
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-gray-800">
                        {item.titolo}
                      </h4>
                      <p className="mt-3">{item.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            {/* <ConsulenzaTable data={prezziario.consulenza} /> */}
            <AccordionComp
              texts={t.prezzi.faq_contratti}
              className="w-full max-w-full"
            />
          </section>
        </div>
      </section>
    </>
  );
};
export default Prezzi;
