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

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 content={t.heads.prezzi_description} name="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
							className="border-transitorio bg-transitorio"
							cta={t.pricing_cmp.cta_breve}
							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,
							]}
							pricingData={pricingTransitorio}
							statico
							tipo={TipologiaPosizioneEnum.Transitorio}
							title={t.prezzi.titolo_transitori}
						/>

						<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 className="flex gap-x-4" key={idx}>
										<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
							className="w-full max-w-full"
							texts={t.prezzi.faq_transitori}
						/>
					</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
							className="border-stabile bg-stabile"
							cta={t.pricing_cmp.cta_stabile}
							opzioni={[
								t.pricing_cmp.stabile_option1,
								t.pricing_cmp.stabile_option2,
							]}
							pricingData={pricingStabile}
							statico
							tipo={TipologiaPosizioneEnum.Stabile}
							title={t.prezzi.titolo_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 className="flex gap-x-4" key={idx}>
										<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
							className="w-full max-w-full"
							texts={t.prezzi.faq_stabile}
						/>
					</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
							className="border-green-400 bg-green-400"
							cta={t.pricing_cmp.cta_consulenza}
							opzioni={[
								"Libero (4 + 4 anni)",
								"Agevolato (3 + 2 anni)",
								"Commerciale",
							]}
							pricingData={
								prezziario.consulenza?.map((s) => s.prezzo_cent / 100) || []
							}
							statico
							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 className="flex gap-x-4" key={idx}>
										<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
							className="w-full max-w-full"
							texts={t.prezzi.faq_contratti}
						/>
					</section>
				</div>
			</section>
		</>
	);
};
export default Prezzi;
