evidencija-rezija/app/ui/UserSettingsForm.tsx

"use client";

import { FC, useState } from "react";
import { UserSettings } from "../lib/db-types";
import { updateUserSettings } from "../lib/actions/userSettingsActions";
import { useFormState, useFormStatus } from "react-dom";
import { useLocale, useTranslations } from "next-intl";
import Link from "next/link";
import SettingsIcon from "@mui/icons-material/Settings";
import { formatIban } from "../lib/formatStrings";
import { InfoBox } from "./InfoBox";

export type UserSettingsFormProps = {
    userSettings: UserSettings | null;
}

type FormFieldsProps = {
    userSettings: UserSettings | null;
    errors: any;
    message: string | null;
}

const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
    const { pending } = useFormStatus();
    const t = useTranslations("user-settings-form");
    const locale = useLocale();

    // Track current form values for real-time validation
    const [formValues, setFormValues] = useState({
        ownerName: userSettings?.ownerName ?? "",
        ownerStreet: userSettings?.ownerStreet ?? "",
        ownerTown: userSettings?.ownerTown ?? "",
        ownerIBAN: formatIban(userSettings?.ownerIBAN) ?? "",
        currency: userSettings?.currency ?? "EUR",
    });

    const handleInputChange = (field: keyof typeof formValues, value: string) => {
        setFormValues(prev => ({ ...prev, [field]: value }));
    };

    // Check if any required field is missing (clean IBAN of spaces for validation)
    const cleanedOwnerIBAN = formValues.ownerIBAN.replace(/\s/g, '');
    const hasMissingData = !formValues.ownerName || !formValues.ownerStreet || !formValues.ownerTown || !cleanedOwnerIBAN || !formValues.currency;

    // Track whether to generate 2D code for tenant (use persisted value from database)
    const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
        userSettings?.show2dCodeInMonthlyStatement ?? false
    );

    return (
        <>
            <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pt-1 pb-2 mt-4">
                <legend className="fieldset-legend font-semibold uppercase">{t("general-settings-legend")}</legend>

                <div className="form-control w-full">
                    <label className="label">
                        <span className="label-text">{t("currency-label")}</span>
                    </label>
                    <select
                        id="currency"
                        name="currency"
                        className="select select-bordered w-full"
                        defaultValue={userSettings?.currency ?? "EUR"}
                        onChange={(e) => handleInputChange("currency", e.target.value)}
                        disabled={pending}
                    >
                        <option value="EUR">EUR - Euro</option>
                        <option value="USD">USD - US Dollar</option>
                        <option value="GBP">GBP - British Pound</option>
                        <option value="CHF">CHF - Swiss Franc</option>
                        <option value="JPY">JPY - Japanese Yen</option>
                        <option value="CAD">CAD - Canadian Dollar</option>
                        <option value="AUD">AUD - Australian Dollar</option>
                        <option value="NZD">NZD - New Zealand Dollar</option>
                        <option value="CNY">CNY - Chinese Yuan</option>
                        <option value="HKD">HKD - Hong Kong Dollar</option>
                        <option value="SGD">SGD - Singapore Dollar</option>
                        <option value="SEK">SEK - Swedish Krona</option>
                        <option value="NOK">NOK - Norwegian Krone</option>
                        <option value="DKK">DKK - Danish Krone</option>
                        <option value="PLN">PLN - Polish Zloty</option>
                        <option value="CZK">CZK - Czech Koruna</option>
                        <option value="HUF">HUF - Hungarian Forint</option>
                        <option value="RON">RON - Romanian Leu</option>
                        <option value="BGN">BGN - Bulgarian Lev</option>
                        <option value="RSD">RSD - Serbian Dinar</option>
                        <option value="BAM">BAM - Bosnia-Herzegovina Mark</option>
                        <option value="MKD">MKD - Macedonian Denar</option>
                        <option value="ALL">ALL - Albanian Lek</option>
                        <option value="TRY">TRY - Turkish Lira</option>
                        <option value="RUB">RUB - Russian Ruble</option>
                        <option value="UAH">UAH - Ukrainian Hryvnia</option>
                        <option value="INR">INR - Indian Rupee</option>
                        <option value="BRL">BRL - Brazilian Real</option>
                        <option value="MXN">MXN - Mexican Peso</option>
                        <option value="ZAR">ZAR - South African Rand</option>
                        <option value="KRW">KRW - South Korean Won</option>
                        <option value="THB">THB - Thai Baht</option>
                        <option value="MYR">MYR - Malaysian Ringgit</option>
                        <option value="IDR">IDR - Indonesian Rupiah</option>
                        <option value="PHP">PHP - Philippine Peso</option>
                    </select>
                    <div id="currency-error" aria-live="polite" aria-atomic="true">
                        {errors?.currency &&
                            errors.currency.map((error: string) => (
                                <p className="mt-2 text-sm text-red-500" key={error}>
                                    {error}
                                </p>
                            ))}
                    </div>
                </div>
            </fieldset>
            <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
                <legend className="fieldset-legend font-semibold uppercase">{t("tenant-2d-code-legend")}</legend>

                <InfoBox className="p-1 mb-1">{t("info-box-message")}</InfoBox>

                <fieldset className="fieldset">
                    <label className="label cursor-pointer justify-start gap-3">
                        <input
                            type="checkbox"
                            name="generateTenantCode"
                            className="toggle toggle-primary"
                            checked={show2dCodeInMonthlyStatement}
                            onChange={(e) => setShow2dCodeInMonthlyStatement(e.target.checked)}
                        />
                        <legend className="fieldset-legend">{t("tenant-2d-code-toggle-label")}</legend>
                    </label>
                </fieldset>

                {show2dCodeInMonthlyStatement && (
                <>
                    <div className="form-control w-full">
                        <label className="label">
                            <span className="label-text">{t("owner-name-label")}</span>
                        </label>
                        <input
                            id="ownerName"
                            name="ownerName"
                            type="text"
                            maxLength={25}
                            placeholder={t("owner-name-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={userSettings?.ownerName ?? ""}
                            onChange={(e) => handleInputChange("ownerName", e.target.value)}
                            disabled={pending}
                        />
                        <div id="ownerName-error" aria-live="polite" aria-atomic="true">
                            {errors?.ownerName &&
                                errors.ownerName.map((error: string) => (
                                    <p className="mt-2 text-sm text-red-500" key={error}>
                                        {error}
                                    </p>
                                ))}
                        </div>
                    </div>

                    <div className="form-control w-full">
                        <label className="label">
                            <span className="label-text">{t("owner-street-label")} </span>
                        </label>
                        <input
                            id="ownerStreet"
                            name="ownerStreet"
                            type="text"
                            maxLength={25}
                            placeholder={t("owner-street-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={userSettings?.ownerStreet ?? ""}
                            onChange={(e) => handleInputChange("ownerStreet", e.target.value)}
                            disabled={pending}
                        />
                        <div id="ownerStreet-error" aria-live="polite" aria-atomic="true">
                            {errors?.ownerStreet &&
                                errors.ownerStreet.map((error: string) => (
                                    <p className="mt-2 text-sm text-red-500" key={error}>
                                        {error}
                                    </p>
                                ))}
                        </div>
                    </div>

                    <div className="form-control w-full">
                        <label className="label">
                            <span className="label-text">{t("owner-town-label")}</span>
                        </label>
                        <input
                            id="ownerTown"
                            name="ownerTown"
                            type="text"
                            maxLength={27}
                            placeholder={t("owner-town-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={userSettings?.ownerTown ?? ""}
                            onChange={(e) => handleInputChange("ownerTown", e.target.value)}
                            disabled={pending}
                        />
                        <div id="ownerTown-error" aria-live="polite" aria-atomic="true">
                            {errors?.ownerTown &&
                                errors.ownerTown.map((error: string) => (
                                    <p className="mt-2 text-sm text-red-500" key={error}>
                                        {error}
                                    </p>
                                ))}
                        </div>
                    </div>

                    <div className="form-control w-full">
                        <label className="label">
                            <span className="label-text">{t("owner-iban-label")}</span>
                        </label>
                        <input
                            id="ownerIBAN"
                            name="ownerIBAN"
                            type="text"
                            placeholder={t("owner-iban-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={formatIban(userSettings?.ownerIBAN)}
                            onChange={(e) => handleInputChange("ownerIBAN", e.target.value)}
                            disabled={pending}
                        />
                        <div id="ownerIBAN-error" aria-live="polite" aria-atomic="true">
                            {errors?.ownerIBAN &&
                                errors.ownerIBAN.map((error: string) => (
                                    <p className="mt-2 text-sm text-red-500" key={error}>
                                        {error}
                                    </p>
                                ))}
                        </div>
                    </div>

                    <InfoBox className="p-1 mt-1">{t("additional-notes")}</InfoBox>
                    </>
                )}
            </fieldset>

            <div id="general-error" aria-live="polite" aria-atomic="true">
                {message && (
                    <p className="mt-2 text-sm text-red-500">
                        {message}
                    </p>
                )}
            </div>

            <div className="pt-4">
                <button className="btn btn-primary w-[5.5em]" disabled={pending}>
                    {pending ? (
                        <span className="loading loading-spinner loading-sm"></span>
                    ) : (
                        t("save-button")
                    )}
                </button>
                <Link className={`btn btn-neutral w-[5.5em] ml-3 ${pending ? "btn-disabled" : ""}`} href={`/${locale}`}>
                    {t("cancel-button")}
                </Link>
            </div>
        </>
    );
};

export const UserSettingsForm: FC<UserSettingsFormProps> = ({ userSettings }) => {
    const initialState = { message: null, errors: {} };
    const [state, dispatch] = useFormState(updateUserSettings, initialState);
    const t = useTranslations("user-settings-form");

    return (
        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
            <div className="card-body">
                <h2 className="card-title"><SettingsIcon className="w-6 h-6" /> {t("title")}</h2>
                <form action={dispatch}>
                    <FormFields
                        userSettings={userSettings}
                        errors={state.errors}
                        message={state.message ?? null}
                    />
                </form>
            </div>
        </div>
    );
};

export const UserSettingsFormSkeleton: FC = () => {
    return (
        <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
            <div className="card-body">
                <div className="h-8 w-32 skeleton mb-4"></div>
                <div className="input w-full skeleton"></div>
                <div className="input w-full skeleton mt-4"></div>
                <div className="textarea w-full h-24 skeleton mt-4"></div>
                <div className="input w-full skeleton mt-4"></div>
                <div className="pt-4">
                    <div className="btn skeleton w-24"></div>
                </div>
            </div>
        </div>
    );
};