evidencija-rezija/app/ui/AccountForm.tsx

"use client";

import { FC, useState } from "react";
import { UserProfile } from "../lib/db-types";
import { updateUserProfile } from "../lib/actions/userProfileActions";
import { useFormState, useFormStatus } from "react-dom";
import { useLocale, useTranslations } from "next-intl";
import Link from "next/link";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { formatIban } from "../lib/formatStrings";
import { InfoBox } from "./InfoBox";

export type AccountFormProps = {
    profile: UserProfile | null;
}

type FormFieldsProps = {
    profile: UserProfile | null;
    errors: any;
    message: string | null;
}

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

    // Track current form values for real-time validation
    const [formValues, setFormValues] = useState({
        firstName: profile?.firstName ?? "",
        lastName: profile?.lastName ?? "",
        address: profile?.address ?? "",
        iban: formatIban(profile?.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.address || !cleanedIban;

    // Track whether to generate 2D code for tenant (use persisted value from database)
    const [show2dCodeInMonthlyStatement, setShow2dCodeInMonthlyStatement] = useState(
        profile?.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={profile?.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={profile?.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("address-label")}</span>
                        </label>
                        <textarea
                            id="address"
                            name="address"
                            className="textarea textarea-bordered w-full placeholder:text-gray-600"
                            placeholder={t("address-placeholder")}
                            defaultValue={profile?.address ?? ""}
                            onChange={(e) => handleInputChange("address", e.target.value)}
                            disabled={pending}
                        ></textarea>
                        <div id="address-error" aria-live="polite" aria-atomic="true">
                            {errors?.address &&
                                errors.address.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(profile?.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>
                    </>
                )}
            </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 AccountForm: FC<AccountFormProps> = ({ profile }) => {
    const initialState = { message: null, errors: {} };
    const [state, dispatch] = useFormState(updateUserProfile, initialState);
    const t = useTranslations("account-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"><AccountCircleIcon className="w-6 h-6" /> {t("title")}</h2>
                <form action={dispatch}>
                    <FormFields
                        profile={profile}
                        errors={state.errors}
                        message={state.message ?? null}
                    />
                </form>
            </div>
        </div>
    );
};

export const AccountFormSkeleton: 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>
    );
};