evidencija-rezija/web-app/app/ui/ViewRentCard.tsx

'use client';

import { FC, useMemo, useState } from "react";
import { BillingLocation, UserSettings } from '@evidencija-rezija/shared-code';
import { formatYearMonth } from "../lib/format";
import { formatCurrency, formatIban } from "../lib/formatStrings";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { EncodePayment, PaymentParams } from "hub-3a-payment-encoder";
import Link from "next/link";
import { LinkIcon } from "@heroicons/react/24/outline";
import { uploadRentProofOfPayment } from "../lib/actions/locationActions";
import QRCode from "react-qr-code";
import { TicketIcon } from "@heroicons/react/24/solid";
import { Pdf417Barcode } from "./Pdf417Barcode";

export interface ViewRentCardProps {
    location: BillingLocation;
    userSettings: UserSettings | null;
    shareId?: string;
}

export const ViewRentCard: FC<ViewRentCardProps> = ({ location, userSettings, shareId }) => {

    const {
        _id,
        name: locationName,
        yearMonth,
        rentAmount,
        tenantName,
        tenantStreet,
        tenantTown,
        tenantPaymentMethod,
        rentProofOfPayment,
        proofOfPaymentType,
    } = location;

    const router = useRouter();
    const t = useTranslations("home-page.location-card");

    const [isUploading, setIsUploading] = useState(false);
    const [uploadError, setUploadError] = useState<string | null>(null);
    const [attachmentUploadedAt, setAttachmentUploadedAt] = useState<Date | null>(rentProofOfPayment?.uploadedAt ?? null);
    const [attachmentFilename, setAttachmentFilename] = useState(rentProofOfPayment?.fileName);

    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (!file) return;

        // Validate file type client-side (quick feedback)
        if (file.type !== 'application/pdf') {
            setUploadError('Only PDF files are accepted');
            e.target.value = ''; // Reset input
            return;
        }

        if (!shareId) {
            setUploadError('Invalid upload link');
            return;
        }

        setIsUploading(true);
        setUploadError(null);

        try {
            const formData = new FormData();
            formData.append('rentProofOfPayment', file);

            const result = await uploadRentProofOfPayment(shareId, formData);

            if (result.success) {
                setAttachmentFilename(file.name);
                setAttachmentUploadedAt(new Date());
                router.refresh();
            } else {
                setUploadError(result.error || 'Upload failed');
            }
        } catch (error: any) {
            setUploadError(error.message || 'Upload failed');
        } finally {
            setIsUploading(false);
            e.target.value = ''; // Reset input
        }
    };

    const totalAmount = rentAmount ?? 0;

    const { hub3aText, paymentParams } = useMemo(() => {

        if (!userSettings?.enableIbanPayment || tenantPaymentMethod !== "iban") {
            return {
                hub3aText: "",
                paymentParams: {} as PaymentParams
            };
        }

        const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0, 19);

        const paymentParams: PaymentParams = {
            Iznos: (totalAmount / 100).toFixed(2).replace(".", ","),
            ImePlatitelja: tenantName ?? "",
            AdresaPlatitelja: tenantStreet ?? "",
            SjedistePlatitelja: tenantTown ?? "",
            Primatelj: userSettings?.ownerName ?? "",
            AdresaPrimatelja: userSettings?.ownerStreet ?? "",
            SjedistePrimatelja: userSettings?.ownerTown ?? "",
            IBAN: userSettings?.ownerIBAN ?? "",
            ModelPlacanja: "HR00",
            PozivNaBroj: formatYearMonth(yearMonth),
            SifraNamjene: "",
            OpisPlacanja: `Najam-${locationNameTrimmed_max20}-${formatYearMonth(yearMonth)}`, // max length 35 = "Najam-" (6) + locationName (20) + "-" (1) + "YYYY-MM" (7) + buffer (1)
        };

        return ({
            hub3aText: EncodePayment(paymentParams),
            paymentParams
        });
    },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        []);

    return (
        <div data-key={_id} className="card card-compact card-bordered max-w-[30em] min-w-[330px] bg-base-100 border-1 border-neutral my-1">
            <div className="card-body">
                <h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {locationName}</h2>
                <div className="divider my-1"></div>
                {
                    totalAmount > 0 ?
                        <p className="text-[1.2rem]">
                            {t("rent-amount-label")} <strong>{formatCurrency(totalAmount, userSettings?.currency)}</strong>
                        </p>
                        : null
                }
                {
                    userSettings?.enableIbanPayment && tenantPaymentMethod === "iban" ?
                        <>
                            <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
                            <ul className="ml-4 mb-3">
                                <li><strong>{t("payment-iban-label")}</strong><pre className="inline pl-1">{formatIban(paymentParams.IBAN)}</pre></li>
                                <li><strong>{t("payment-recipient-label")}</strong> <pre className="inline pl-1">{paymentParams.Primatelj}</pre></li>
                                <li><strong>{t("payment-recipient-address-label")}</strong><pre className="inline pl-1">{paymentParams.AdresaPrimatelja}</pre></li>
                                <li><strong>{t("payment-recipient-city-label")}</strong><pre className="inline pl-1">{paymentParams.SjedistePrimatelja}</pre></li>
                                <li><strong>{t("payment-amount-label")}</strong> <pre className="inline pl-1">{paymentParams.Iznos} {userSettings?.currency}</pre></li>
                                <li><strong>{t("payment-description-label")}</strong><pre className="inline pl-1">{paymentParams.OpisPlacanja}</pre></li>
                                <li><strong>{t("payment-model-label")}</strong><pre className="inline pl-1">{paymentParams.ModelPlacanja}</pre></li>
                                <li><strong>{t("payment-reference-label")}</strong><pre className="inline pl-1">{paymentParams.PozivNaBroj}</pre></li>
                            </ul>
                            <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
                                <Pdf417Barcode hub3aText={hub3aText} className="w-full max-w-[35rem] sm:max-w-[25rem]" />
                            </label>
                        </>
                        : null
                }
                {
                    userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ? (() => {
                        const revolutPaymentUrl = `https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(totalAmount).toFixed(0)}&currency=${userSettings.currency}`;
                        return (
                            <>
                                <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
                                <div className="flex justify-center">
                                    <QRCode value={revolutPaymentUrl} size={200} className="p-4 bg-white border border-gray-300 rounded-box" />
                                </div>
                                <p className="text-center mt-1 mb-3">
                                    <LinkIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 ml-[-.5em]" />
                                    <Link
                                        href={revolutPaymentUrl}
                                        target="_blank"
                                        className="underline"
                                    >
                                        {t("revolut-link-text")}
                                    </Link>
                                </p>
                            </>
                        );
                    })()
                        : null
                }
                {
                    // Show upload fieldset for rent proof of payment when accessed via share link
                    shareId && proofOfPaymentType !== "none" &&
                    <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">
                        <legend className="fieldset-legend font-semibold uppercase">{t("upload-rent-proof-of-payment-legend")}</legend>
                        {
                            // IF proof of payment was uploaded
                            attachmentUploadedAt ? (
                                // IF file name is available, show link to download
                                // ELSE it's not available that means that the uploaded file was purged by housekeeping
                                // -> don't show anything
                                attachmentFilename ? (
                                    <div className="mt-3 ml-[-.5rem]">
                                        <Link
                                            href={`/share/proof-of-payment/rent/${shareId || _id}/`}
                                            target="_blank"
                                            className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
                                        >
                                            <TicketIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 mt-[-.1em] text-teal-500" />
                                            {decodeURIComponent(attachmentFilename)}
                                        </Link>
                                    </div>
                                ) : null
                            ) : /* ELSE show upload input */ (
                                <div className="form-control w-full">
                                    <label className="label">
                                        <span className="label-text">{t("upload-rent-proof-of-payment-label")}</span>
                                    </label>
                                    <div className="flex items-center gap-2">
                                        <input
                                            id="rentProofOfPayment"
                                            name="rentProofOfPayment"
                                            type="file"
                                            accept="application/pdf"
                                            className="file-input file-input-bordered grow file-input-sm my-2 block max-w-[17em] md:max-w-[80em] break-words"
                                            onChange={handleFileChange}
                                            disabled={isUploading}
                                        />
                                        {isUploading && (
                                            <span className="loading loading-spinner loading-sm"></span>
                                        )}
                                    </div>
                                    {uploadError && (
                                        <p className="text-sm text-red-500 mt-1">{uploadError}</p>
                                    )}
                                </div>
                            )}
                    </fieldset>
                }
            </div>
        </div>);
};