import { Expand, ExternalLink } from "lucide-react";
import Link from "next/link";
import { replaceWithBr } from "~/lib/newlineToBr";
import { cn, formatCurrency } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import type { Annunci } from "~/schemas/public/Annunci";
import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";
import { CarouselAnnuncio } from "../annuncio_card";
import {
	Credenza,
	CredenzaBody,
	CredenzaContent,
	CredenzaDescription,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "../custom_ui/credenza";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";

export const TipoBadge = ({
	tipo,
	mini,
}: {
	tipo: Annunci["tipo"];
	mini?: boolean;
}) => {
	return (
		<Badge
			className={cn(
				"font-semibold text-md",
				tipo === "Transitorio" && "bg-transitorio",
				tipo === "Stabile" && "bg-stabile",
				tipo === "Cessione" && "bg-blue-400",
				tipo === "Vendita" && "bg-green-400",
			)}
		>
			{!mini && "Affitto"} {tipo}
		</Badge>
	);
};

export const AnnuncioDettaglio = ({ data }: { data: AnnuncioRicerca }) => {
	const { locale, t } = useTranslation();

	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button
					aria-label="Dettagli Annuncio"
					className="w-full"
					variant="outline"
				>
					<Expand /> {locale === "it" ? "Dettaglio" : "Detail"}
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-w-xl sm:max-w-6xl md:max-h-[90vh] md:overflow-y-auto">
				<CredenzaHeader className="flex-row items-center justify-between gap-4 md:justify-start">
					<CredenzaTitle className="text-xl">
						{locale === "it" ? "Annuncio" : "Listing"} {data.codice}
					</CredenzaTitle>
					<Link href={`/annuncio/${data.codice}`} target="_blank">
						<Button size="sm" variant="info">
							<span>{locale === "it" ? "Pagina completa" : "Full page"}</span>{" "}
							<ExternalLink />
						</Button>
					</Link>
					<CredenzaDescription className="sr-only">
						{locale === "it" ? "Dettaglio" : "Detail"}
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="h-full overflow-auto pb-5">
					<div className="flex flex-col gap-2 px-2">
						<div className="w-full contain-inline-size">
							<CarouselAnnuncio
								immagini={data.images}
								updated_at={data.media_updated_at}
								videos={data.videos}
							/>
						</div>

						<div className="space-y-3">
							<div className="flex items-center gap-4">
								<TipoBadge tipo={data.tipo} />
								{data.stato === "Trattativa" && (
									<Badge className="bg-violet-500 font-semibold text-md">
										{locale === "it"
											? "Annuncio in Trattativa"
											: "Listing in Negotiation"}
									</Badge>
								)}
							</div>

							<div className="space-y-2">
								<div className="flex flex-row justify-around">
									<div className="text-center">
										<dt className="sr-only">{t.card.codice}</dt>

										<dd className="font-semibold text-lg">
											Cod: {data.codice}
										</dd>
									</div>
									<div className="text-center">
										<dt className="sr-only">{t.card.prezzo}</dt>

										<dd className="font-semibold text-lg">
											{formatCurrency(data.prezzo / 1e2)}
										</dd>
									</div>
								</div>

								<div className="">
									<dt className="sr-only">{t.card.titolo}</dt>

									<dd className="font-semibold text-base md:text-lg">
										{locale === "it" ? data.titolo_it : data.titolo_en}
									</dd>
								</div>

								<div
									className="text-base"
									dangerouslySetInnerHTML={{
										__html: replaceWithBr(
											(locale === "it" ? data.desc_it : data.desc_en) || "",
										),
									}}
								/>
							</div>
						</div>
					</div>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};
