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

/**
 * Pagina prezzi: /prezzi
 */
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-8xl px-2 py-5 md:px-8">
				<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
					{t.prezzi_titolo}
				</Badge>
				<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-center font-semibold text-4xl">
							{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="sm:my-5">
							<GridTesti
								iconClassName="bg-transitorio/10 text-transitorio"
								testi={t.prezzi.cta_transitori}
								titleClassName="text-[color-mix(in_oklch,var(--transitorio)80%,black)] dark:text-transitorio"
							/>
						</div>

						{/* <ConsulenzaServizio data={prezziario.transitorio} /> */}
						<AccordionComp
							className="w-full max-w-full rounded-lg bg-muted px-4 py-2"
							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-center font-semibold text-4xl">
							{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,
								t.pricing_cmp.stabile_option3,
							]}
							pricingData={pricingStabile}
							statico
							tipo={TipologiaPosizioneEnum.Stabile}
							title={t.prezzi.titolo_stabile}
						/>
						<p>{t.prezzi.desc_stabile}</p>
						<div className="sm:my-5">
							<GridTesti
								iconClassName="bg-stabile/10 text-stabile"
								testi={t.prezzi.cta_stabile}
								titleClassName="text-[color-mix(in_oklch,var(--stabile)80%,black)] dark:text-stabile"
							/>
						</div>
						{/* <ConsulenzaServizio data={prezziario.stabile} /> */}
						<AccordionComp
							className="w-full max-w-full rounded-lg bg-muted px-4 py-2"
							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-center font-semibold text-4xl">
							{t.prezzi.titolo_servizio_contratti}
						</h1>

						<PricingComponentConsulenza
							className="border-consulenza bg-consulenza"
							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="sm:my-5">
							<GridTesti
								iconClassName="bg-consulenza/10 text-consulenza"
								testi={t.prezzi.cta_contratti}
								titleClassName="text-[color-mix(in_oklch,var(--consulenza)80%,black)] dark:text-consulenza"
							/>
						</div>
						{/* <ConsulenzaTable data={prezziario.consulenza} /> */}
						<AccordionComp
							className="w-full max-w-full rounded-lg bg-muted px-4 py-2"
							texts={t.prezzi.faq_contratti}
						/>
					</section>
				</div>
			</section>
		</>
	);
};
export async function getServerSideProps() {
	const helper = generateSSGHelper();
	await helper.prezziario.getPrezziPerTipologiaAll.fetch();
	return {
		props: {
			trpcState: helper.dehydrate(),
		},
	};
}

export default Prezzi;

const GridTesti = ({
	testi,
	iconClassName,
	titleClassName,
}: {
	testi: Array<{ titolo: string; desc: string; icon: IconType }>;
	iconClassName: string;
	titleClassName: string;
}) => {
	return (
		<ul className="grid gap-4 sm:grid-cols-2 sm:gap-8 lg:grid-cols-2">
			{testi.map((item) => (
				<li
					className="flex gap-x-4 rounded-lg p-2 dark:bg-muted"
					key={item.titolo}
				>
					<div
						className={cn(
							"flex size-12 flex-none items-center justify-center rounded-lg",
							iconClassName,
						)}
					>
						<IconMatrix type={item.icon} />
					</div>
					<div>
						<h4 className={cn("font-semibold text-lg", titleClassName)}>
							{item.titolo}
						</h4>
						<p className="mt-3">{item.desc}</p>
					</div>
				</li>
			))}
		</ul>
	);
};
