evidencija-rezija/web-app/app/[locale]/home/multi-bill-edit/[year]/[month]/MultiBillEdit.tsx

'use client';

import { FC, useState } from "react";
import { BillingLocation, YearMonth } from "../../../../../lib/db-types";
import { formatYearMonth } from "../../../../../lib/format";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { updateMonth } from "../../../../../lib/actions/monthActions";
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { BillToggleBadge } from "./BillToggleBadge";

export interface MultiBillEditProps {
    locations: BillingLocation[];
    year: number;
    month: number;
}

interface BillState {
    locationId: string;
    billId: string;
    paid: boolean;
}

export const MultiBillEdit: FC<MultiBillEditProps> = ({ locations, year, month }) => {
    const t = useTranslations("multi-bill-edit");
    const router = useRouter();

    const [isSaving, setIsSaving] = useState(false);

    const [billStates, setBillStates] = useState<BillState[]>(() =>
        locations.flatMap(location =>
            location.bills.map(bill => ({
                locationId: location._id,
                billId: bill._id,
                paid: bill.paid,
            }))
        )
    );

    const [allPaidMode, setAllPaidMode] = useState(() =>
        billStates.length > 0 && billStates.every(bill => bill.paid)
    );

    // Toggle individual bill paid status
    const handleBillToggle = (locationId: string, billId: string) => {
        setBillStates(prevStates =>
            prevStates.map(state =>
                state.locationId === locationId && state.billId === billId
                    ? { ...state, paid: !state.paid }
                    : state
            )
        );
    };

    // Toggle all bills paid status
    const handleSetAllAsPayed = () => {
        const newPaidState = !allPaidMode;
        setAllPaidMode(newPaidState);
        setBillStates(prevStates =>
            prevStates.map(state => ({ ...state, paid: newPaidState }))
        );
    };

    // Save changes to database
    const handleSave = async () => {
        setIsSaving(true);
        try {
            const updates = billStates.map(state => ({
                locationId: state.locationId,
                billId: state.billId,
                paid: state.paid,
            }));

            await updateMonth({ year, month }, updates);

        } catch (error) {
            console.error('Error saving bill updates:', error);
            toast.error(t("save-error-message"), { theme: "dark" });
            setIsSaving(false);
        }
    };

    // Cancel and return to home page
    const handleCancel = () => {
        router.push(`/home?year=${year}`);
    };

    // Get bill state for a specific bill
    const getBillState = (locationId: string, billId: string): boolean => {
        const state = billStates.find(
            s => s.locationId === locationId && s.billId === billId
        );
        return state?.paid ?? false;
    };

    const yearMonth: YearMonth = { year, month };

    return (
        <div className={`collapse bg-base-200 my-1 sm:min-w-[25em] border-2 border-neutral`}>
            <h1 className="text-xl font-medium text-white collapse-title ml-1">{formatYearMonth(yearMonth)}</h1>
            <div className="absolute cursor-pointer top-4 right-[20px]">
                <BillToggleBadge locationId={"dummy"}
                    bill={{ paid:allPaidMode, name: allPaidMode ? t("set-all-as-unpaid-button") : t("set-all-as-paid-button"), hasAttachment: false, proofOfPayment: undefined }}
                    onClick={handleSetAllAsPayed}
                    />
            </div>
            <div className="p-[16px] pt-0">
                {locations.map(location => (
                    <div key={location._id} className="card card-compact card-bordered max-w-[35em] bg-base-100 border-1 border-neutral mb-2">
                        <div className="card-body">
                            <h2 className="card-title text-[1rem]">
                                {formatYearMonth(yearMonth)} {location.name}
                            </h2>
                            <div className="space-y-4 mt-[-.5rem]">
                                {location.bills.length > 0 ? (
                                    <div className="flex flex-wrap gap-2 mt-2">
                                        {location.bills.map(bill => {
                                            const isPaid = getBillState(location._id, bill._id);
                                            return (
                                                <BillToggleBadge
                                                    key={bill._id}
                                                    locationId={location._id}
                                                    bill={{ ...bill, paid: isPaid }}
                                                    onClick={() => handleBillToggle(location._id, bill._id)}
                                                />
                                            );
                                        })}
                                    </div>
                                ) : (
                                    <p className="text-sm text-gray-500">{t("no-bills-message")}</p>
                                )}
                            </div>
                        </div>
                    </div>
                ))}
                {/* Action buttons */}
                <div className="pt-4">
                    <button
                        onClick={handleSave}
                        className="btn btn-primary ml-3"
                        disabled={isSaving}
                    >
                        {isSaving ? (
                            <>
                                <span className="loading loading-spinner loading-sm"></span>
                                {t("saving-button")}
                            </>
                        ) : (
                            t("save-button")
                        )}
                    </button>
                    <button
                        onClick={handleCancel}
                        className="btn btn-neutral ml-3"
                        disabled={isSaving}
                    >
                        {t("cancel-button")}
                    </button>
                </div>
            </div>
            <ToastContainer />
        </div>
    );
};