import Image from "next/image";
import { AnnuncioActions } from "~/components/servizio/annuncio_actions";
import { Interactions } from "~/components/servizio/interactions";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { handleConsegna } from "~/lib/annuncio_details";
import { getStorageUrl } from "~/lib/storage_utils";
import { cn, formatCurrency } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";
import { AnnuncioDettaglio, TipoBadge } from "./annuncio_dettaglio";

export const AnnuncioCard = ({
	className,
	confirming,
}: {
	className?: string;
	confirming?: boolean;
}) => {
	const { data } = useServizioAnnuncio();

	return (
		<BasicAnnuncioCard
			actions={<AnnuncioActions />}
			className={className}
			confirming={confirming}
			data={{
				...data,
				modificato_il: data.modificato_il ? new Date(data.modificato_il) : null,
				media_updated_at: data.media_updated_at
					? new Date(data.media_updated_at)
					: null,
			}}
			interactions={<Interactions />}
		/>
	);
};
export const BasicAnnuncioCard = ({
	actions,
	interactions,
	className,
	data,
	confirming,
}: {
	actions?: React.ReactNode;
	interactions?: React.ReactNode;
	className?: string;
	data: AnnuncioRicerca;
	confirming?: boolean;
}) => {
	const { t } = useTranslation();

	return (
		<Card className={cn("w-full gap-2 border-white py-3", className)}>
			<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
				<CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle>
				{actions}
			</CardHeader>
			<CardContent className="px-3">
				<div
					className={cn(
						"@container flex w-full flex-col gap-4",
						confirming && "xl:flex-row xl:gap-6",
					)}
					id="container"
				>
					<div
						className={cn(
							"grid @md:grid-cols-[12rem_1fr] grid-cols-[7rem_1fr] gap-x-4 gap-y-2 rounded-md md:max-w-3xl md:border md:border-white md:bg-[#e6e9ec]/50 lg:gap-x-6 xl:gap-x-8 dark:md:border-primary dark:md:bg-card",
							confirming && "xl:w-1/2",
						)}
					>
						<div className="row-span-1 md:row-span-3">
							<Image
								alt={data.codice}
								className="size-24 rounded-md bg-[#e6e9ec] object-cover md:size-48"
								height={1080}
								priority
								src={
									(data?.images[0] &&
										getStorageUrl({
											storageId: data.images[0].img,
											params: {
												cacheKey: data.media_updated_at?.toISOString(),
												media: "image",
											},
										})) ||
									"/fallback-image.png"
								}
								width={1920}
							/>
						</div>

						<div className="col-span-1 flex w-full max-w-xl flex-wrap gap-5 md:col-span-1 md:mt-4 md:pr-8">
							<span className="text-wrap">{data.titolo_it}</span>
						</div>

						<div className="col-span-2 flex w-full max-w-xl items-center justify-between gap-2 md:col-span-1 md:pr-8">
							<TipoBadge mini tipo={data.tipo} />
							<span className="max-w-auto truncate">
								{handleConsegna({
									aggiornamento: t.card.in_aggiornamento,
									consegna: data.consegna,
									consegna_da: t.card.consegna_da,
									mesi: t.parametri.mesi,
									subito: t.card.consegna_subito,
								})}
							</span>
							<span className="font-semibold">
								{formatCurrency(data.prezzo / 1e2)}
							</span>
						</div>
						<div className="col-span-2 w-full max-w-xl md:col-span-1 md:pr-8">
							<AnnuncioDettaglio data={data} />
						</div>
					</div>
					<div
						className={cn(
							"flex w-full flex-col gap-4",
							confirming && "xl:w-1/2",
						)}
					>
						{interactions}
					</div>
				</div>
			</CardContent>
		</Card>
	);
};

export const AnnuncioCardSkeleton = () => {
	return (
		<Card className="hidden w-full gap-2 rounded-md border-border py-3 opacity-30 lg:flex">
			<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
				<CardTitle className="h-8 w-64 rounded-md bg-muted" />
			</CardHeader>
			<CardContent className="h-max px-3">
				<div className="flex w-full flex-col gap-4">
					<div className="h-[194px] w-full rounded-md bg-muted" />
					<div className="h-8 w-48 rounded-md bg-muted" />
				</div>
			</CardContent>
		</Card>
	);
};