infoalloggi-monorepo/apps/infoalloggi/src/components/area-riservata/ordini.tsx

import { CircleCheck, CircleSlash, ReceiptText } from "lucide-react";
import Link from "next/link";
import type { Dispatch, SetStateAction } from "react";
import toast from "react-hot-toast";
import {
	Credenza,
	CredenzaBody,
	CredenzaClose,
	CredenzaContent,
	CredenzaDescription,
	CredenzaFooter,
	CredenzaHeader,
	CredenzaTitle,
} from "~/components/custom_ui/credenza";
import { Button } from "~/components/ui/button";
import { FormEditOrder } from "~/forms/FormEditOrdine";
import { genRicevutaUfficio } from "~/hooks/useRicevutaUfficio";
import { formatCurrency } from "~/lib/utils";
import type { OrdiniOrdineId } from "~/schemas/public/Ordini";
import type { Prezziario } from "~/schemas/public/Prezziario";
import { api } from "~/utils/api";

export const AdminWrapperOrdiniModal = ({
	ordineId,
	setSelected,
}: {
	ordineId: OrdiniOrdineId | null;
	setSelected: Dispatch<SetStateAction<OrdiniOrdineId | null>>;
}) => {
	const { data: prezzi, isLoading } = api.prezziario.getPrezziario.useQuery();
	if (isLoading || !ordineId || !prezzi) return null;
	return (
		<AdminOrdiniModal
			ordineId={ordineId}
			prezzi={prezzi}
			setSelected={setSelected}
		/>
	);
};
const AdminOrdiniModal = ({
	prezzi,
	setSelected,
	ordineId,
}: {
	prezzi: Prezziario[];
	setSelected: Dispatch<SetStateAction<OrdiniOrdineId | null>>;
	ordineId: OrdiniOrdineId;
}) => {
	const { data } = api.servizio.getOrdineById.useQuery({
		ordineId,
	});

	const { mutate: sendReceipt } =
		api.comunicazioni.sendRicevutaECondizioniEmail.useMutation({
			onSuccess: () => {
				toast.success("Email inviata con successo!");
			},
			onError: (error) => {
				toast.error(`Errore durante l'invio dell'email: ${error.message}`);
			},
		});

	if (!data) return null;

	return (
		<Credenza
			onOpenChange={(b) => {
				if (!b) setSelected(null);
			}}
			open={ordineId !== null}
		>
			<CredenzaContent className="max-h-[90vh] max-w-2xl sm:max-w-4xl">
				<CredenzaHeader>
					<CredenzaTitle>Dettagli Ordine</CredenzaTitle>
					<CredenzaDescription>
						Visualizza i dettagli e i pagamenti associati.
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] space-y-2 overflow-auto pb-5">
					<p>Id Ordine: {data.ordine_id}</p>
					<div className="flex items-center gap-2">
						{data.isActive && (
							<div>
								<Link
									href={`/servizio/ricevuta-cortesia/${data.ordine_id}`}
									target="_blank"
								>
									<Button variant="outline">
										Ricevuta di cortesia <ReceiptText />
									</Button>
								</Link>
							</div>
						)}
						<Button
							disabled={!data.isActive}
							onClick={() => {
								if (!data.isActive || !data.codice_fiscale) return;
								genRicevutaUfficio({
									date:
										data.paymentmethod !== "manual" && data.paid_at
											? data.paid_at.toLocaleDateString("it-IT")
											: data.created_at.toLocaleDateString("it-IT"),
									codice_fiscale: data.codice_fiscale,
									indirizzo: data.indirizzo,
									nominativo: data.username,
									pack1_codice: data.packid,
									pack1_qnt: "1",
									pack1_iva: "22",
									pack1_importo: (data.amount_cent / 100)
										.toFixed(2)
										.replace(".", ","),
									totale: formatCurrency(data.amount_cent / 100),
									pack1_titolo:
										prezzi.find((p) => p.idprezziario === data.packid)
											?.nome_it || "",
								});
							}}
							variant="orange"
						>
							Ricevuta Ufficio
						</Button>
						<Button
							disabled={!data.isActive}
							onClick={() => sendReceipt({ ordineId: data.ordine_id })}
							variant="outline"
						>
							Invia Ricevuta e Condizioni
						</Button>
					</div>
					<FormEditOrder
						close={() => setSelected(null)}
						data={data}
						prezziario={prezzi}
					/>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};

export const UserOrdiniModal = ({
	setSelected,
	ordineId,
}: {
	setSelected: (ordineId: OrdiniOrdineId | null) => void;
	ordineId: OrdiniOrdineId;
}) => {
	const { data } = api.servizio.getOrdineById.useQuery({
		ordineId,
	});
	if (!data) return null;

	return (
		<Credenza
			onOpenChange={(b) => {
				if (!b) setSelected(null);
			}}
			open={ordineId !== null}
		>
			<CredenzaContent className="max-h-[90vh] max-w-2xl sm:max-w-4xl">
				<CredenzaHeader>
					<CredenzaTitle>Dettagli Ordine</CredenzaTitle>
					<CredenzaDescription>
						Visualizza i dettagli e i pagamenti associati.
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] space-y-2 overflow-auto pb-5">
					<p>Id Ordine: {data.ordine_id}</p>
					<p>
						Data Ordine: {new Date(data.created_at).toLocaleDateString("it-IT")}
					</p>
					<p>Tipologia: {data.type.toString()}</p>
					<p>Pack ID: {data.packid}</p>
					<p className="flex items-center gap-2">
						Stato:{" "}
						{data.isActive ? (
							<span className="inline-flex items-center gap-1 text-green-500">
								<CircleCheck className="size-5" />
								Attivo
							</span>
						) : (
							<span className="inline-flex items-center gap-1">
								<CircleSlash className="size-5" />
								Non Attivo
							</span>
						)}
					</p>
					<p>
						Importo: {formatCurrency(data.amount_cent / 100)}{" "}
						{data.sconto > 0 && <span>({data.sconto}%)</span>}
					</p>
					{data.isActive && (
						<div>
							<Link
								href={`/servizio/ricevuta-cortesia/${data.ordine_id}`}
								target="_blank"
							>
								<Button variant="outline">
									Ricevuta di cortesia <ReceiptText />
								</Button>
							</Link>
						</div>
					)}
				</CredenzaBody>
				<CredenzaFooter className="flex w-full sm:justify-end">
					<CredenzaClose asChild>
						<Button variant="ghost">Chiudi</Button>
					</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};