"use client";

import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import Image from "next/image";
import { format } from "date-fns";
import { useReactToPrint } from "react-to-print";
import { it } from "date-fns/locale";
import { formatCurrency } from "~/lib/utils";
import { useRef } from "react";
import { PaymentMethodToString, type PaymentType } from "~/i18n/stripe";

export function ReceiptGenerator({ data }: { data: PurchaseData }) {
  const contentRef = useRef<HTMLDivElement>(null);
  const reactToPrintFn = useReactToPrint({
    contentRef,
    //print: async (target) => {console.log("Printing...", target.contentDocument);},
  });
  return (
    <div className="mx-auto max-w-4xl">
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold">Ricevuta di cortesia</h1>

          <Button onClick={() => reactToPrintFn()} className="print:hidden">
            Stampa
          </Button>
        </div>
        <div ref={contentRef}>
          <Receipt data={data} />
        </div>
      </div>
    </div>
  );
}

interface Item {
  description: string;
  price: number;
  discount: number;
}

export interface PurchaseData {
  paymentId: string;
  date: Date;

  clienteNome: string;
  clienteIndirizzo: string;
  paymentMethod: string;
  items: Item[];
}

interface ReceiptProps {
  data: PurchaseData;
}

function Receipt({ data }: ReceiptProps) {
  const companyName = "Arcenia S.r.l.";

  const companyAddress =
    "Via Beata Giovanna 1\nBassano del Grappa (VI) 36061\nItalia";

  const total = data.items.reduce(
    (acc, item) => acc + item.price * (1 - item.discount),
    0,
  );
  const note =
    "La presente è non costituisce ricevuta o fattura fiscale.\nRiceverai la fattura elettronica direttamente al tuo indirizzo di posta.";
  const footer =
    "Arcenia Srl.  | Tel. +39 0424529869 | Email: arca@infoalloggi.it";
  return (
    <Card className="p-4 print:border-none print:shadow-none">
      <div className="space-y-6">
        <div className="flex items-start justify-between">
          <div>
            <h1 className="text-2xl font-bold">{companyName}</h1>
            <p className="text-sm whitespace-pre-line">{companyAddress}</p>
          </div>

          <div className="relative size-24">
            <Image
              src={"/favicon/favicon.png"}
              alt={`${companyName} logo`}
              fill
              className="object-contain"
            />
          </div>
        </div>
        <div className="border-b pb-4">
          <h2 className="text-center text-xl font-semibold">
            Ricevuta di cortesia
          </h2>
          <div className="mt-2 flex justify-between">
            <div>
              <p className="text-muted-foreground text-sm">ID Pagamento</p>
              <p className="text-sm">{data.paymentId}</p>
            </div>
            <div className="text-right">
              <p className="text-muted-foreground text-sm">Data</p>
              <p className="font-medium">
                {format(data.date, "PPP", {
                  locale: it,
                })}
              </p>
              <p className="text-sm">
                {format(data.date, "p", {
                  locale: it,
                })}
              </p>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-6">
          <div>
            <h3 className="mb-1 font-semibold">Intestatario:</h3>
            <p className="font-medium">{data.clienteNome}</p>
            <p className="text-sm whitespace-pre-line">
              {data.clienteIndirizzo}
            </p>
          </div>
        </div>
        <div>
          <table className="w-full">
            <thead>
              <tr className="border-b">
                <th className="py-2 text-left">Descrizione</th>
                <th className="py-2 text-right">Prezzo</th>
                <th className="py-2 text-right">Sconto</th>
                <th className="py-2 text-right">Importo</th>
              </tr>
            </thead>
            <tbody>
              {data.items.map((item, idx) => (
                <tr key={idx} className="border-b">
                  <td className="py-2">{item.description}</td>
                  <td className="py-2 text-right">
                    {formatCurrency(item.price)}
                  </td>
                  <td className="py-2 text-right">
                    {item.discount > 0
                      ? `-${(item.discount * 100).toFixed(0)}%`
                      : ""}
                  </td>
                  <td className="py-2 text-right">
                    {formatCurrency(item.price * (1 - item.discount))}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="flex justify-end">
          <div className="w-64">
            <div className="mt-1 flex justify-between pt-2 font-bold">
              <span>Totale:</span>
              <span>{formatCurrency(total)}</span>
            </div>
            <div className="flex justify-between py-1">
              <span>di cui IVA (22%):</span>
              <span>{formatCurrency(total * 0.22)}</span>
            </div>
          </div>
        </div>
        <div className="border-t pt-4">
          <div className="flex justify-between">
            <div>
              <h3 className="mb-1 font-semibold">Metodo di pagamento</h3>
              <p>{PaymentMethodToString(data.paymentMethod as PaymentType)}</p>
            </div>
            <div className="text-right">
              <h3 className="mb-1 font-semibold">Status pagamento</h3>
              <p className="font-medium text-green-600">Pagato</p>
            </div>
          </div>
        </div>
        <div className="border-t pt-4">
          <h3 className="mb-1 font-semibold">Note</h3>
          <p className="text-sm whitespace-pre-line">{note}</p>
        </div>

        <div className="text-muted-foreground pt-6 text-center text-sm">
          <p>{footer}</p>
        </div>
      </div>
    </Card>
  );
}