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({
        firstName: userSettings?.firstName ?? "",
        lastName: userSettings?.lastName ?? "",
        street: userSettings?.street ?? "",
        iban: formatIban(userSettings?.iban) ?? "",
    });

    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 cleanedIban = formValues.iban.replace(/\s/g, '');
    const hasMissingData = !formValues.firstName || !formValues.lastName || !formValues.street || !cleanedIban;

    // 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 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("first-name-label")}</span>
                        </label>
                        <input
                            id="firstName"
                            name="firstName"
                            type="text"
                            placeholder={t("first-name-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={userSettings?.firstName ?? ""}
                            onChange={(e) => handleInputChange("firstName", e.target.value)}
                            disabled={pending}
                        />
                        <div id="firstName-error" aria-live="polite" aria-atomic="true">
                            {errors?.firstName &&
                                errors.firstName.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("last-name-label")}</span>
                        </label>
                        <input
                            id="lastName"
                            name="lastName"
                            type="text"
                            placeholder={t("last-name-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={userSettings?.lastName ?? ""}
                            onChange={(e) => handleInputChange("lastName", e.target.value)}
                            disabled={pending}
                        />
                        <div id="lastName-error" aria-live="polite" aria-atomic="true">
                            {errors?.lastName &&
                                errors.lastName.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("street-label")} </span>
                        </label>
                        <input
                            id="street"
                            name="street"
                            type="text"
                            placeholder={t("street-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={userSettings?.street ?? ""}
                            onChange={(e) => handleInputChange("street", e.target.value)}
                            disabled={pending}
                        />
                        <div id="street-error" aria-live="polite" aria-atomic="true">
                            {errors?.street &&
                                errors.street.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("iban-label")}</span>
                        </label>
                        <input
                            id="iban"
                            name="iban"
                            type="text"
                            placeholder={t("iban-placeholder")}
                            className="input input-bordered w-full placeholder:text-gray-600"
                            defaultValue={formatIban(userSettings?.iban)}
                            onChange={(e) => handleInputChange("iban", e.target.value)}
                            disabled={pending}
                        />
                        <div id="iban-error" aria-live="polite" aria-atomic="true">
                            {errors?.iban &&
                                errors.iban.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>
    );
};