import { getVerbalKas, simpanVerbalKas } from '@/api/api_kas';
import { alertError, alertSuccess } from '@/components/costum/alert';
import { ButtonSubmit } from '@/components/costum/button_submit';
import { formatDate } from '@/helper';
import { UangKertas, UangLogam, Verbal } from '@/types';
import { usePage } from '@inertiajs/react';
import { ArrowLeft, Delete, Save } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { NumericFormat } from 'react-number-format';
import { Link } from 'react-router';

export default function LaporanVerbalKas() {
    const { token } = usePage().props;
    const [uangLogam, setUangLogam] = useState<UangLogam>();
    const [uangKertas, setUangKertas] = useState<UangKertas>();

    const [verbal, setVerbal] = useState<Verbal>({
        tanggal: formatDate(new Date()),
        saldo_awal_kas: 0,
        saldo_akhir_kas: 0,
    });

    const hitungTotalUangLogam = useCallback(() => {
        let total = 0;
        for (const key in uangLogam) {
            if (Object.prototype.hasOwnProperty.call(uangLogam, key)) {
                const element = uangLogam[key as keyof UangLogam];
                total += Number(element);
            }
        }
        return total;
    }, [uangLogam]);

    const hitungTotalUangKertas = useCallback(() => {
        let total = 0;
        for (const key in uangKertas) {
            if (Object.prototype.hasOwnProperty.call(uangKertas, key)) {
                const element = uangKertas[key as keyof UangKertas];
                total += Number(element);
            }
        }
        return total;
    }, [uangKertas]);

    const hitungTotalNominalUangLogam = useCallback(() => {
        let total = 0;
        if (uangLogam) {
            const nominalMap: Record<keyof UangLogam, number> = {
                ul1000: 1000,
                ul500: 500,
                ul200: 200,
                ul100: 100,
                ul50: 50,
                ul25: 25,
            };
            for (const key in nominalMap) {
                const jumlah = uangLogam[key as keyof UangLogam] ?? 0;
                total += jumlah * nominalMap[key as keyof UangLogam];
            }
        }
        return total;
    }, [uangLogam]);

    const hitungTotalNominalUangKertas = useCallback(() => {
        let total = 0;
        if (uangKertas) {
            const nominalMap: Record<keyof UangKertas, number> = {
                uk100000: 100000,
                uk75000: 75000,
                uk50000: 50000,
                uk20000: 20000,
                uk10000: 10000,
                uk5000: 5000,
                uk2000: 2000,
                uk1000: 1000,
            };
            for (const key in nominalMap) {
                const jumlah = uangKertas[key as keyof UangKertas] ?? 0;
                total += jumlah * nominalMap[key as keyof UangKertas];
            }
        }
        return total;
    }, [uangKertas]);

    const setDataUangLogam = (key: string, value: string) => {
        setUangLogam((prev) => ({
            ...prev,
            [key]: Number(value),
        }));
    };

    const setDataUangKertas = (key: string, value: string) => {
        setUangKertas((prev) => ({
            ...prev,
            [key]: Number(value),
        }));
    };

    const getDataVerbal = async () => {
        const response = await getVerbalKas(verbal.tanggal ?? formatDate(new Date()), token as string);
        const responseBody = await response.json();
        console.log(responseBody);
        if (response.status == 200 || response.status == 201) {
            const data = responseBody;
            setVerbal(data);
            setUangLogam(data.uangLogam);
            setUangKertas(data.uangKertas);
        } else {
            alertError(responseBody.message);
        }
    };

    const simpanVerbal = async () => {
        const dataVerbal = { ...verbal, uangLogam, uangKertas, total_kas_fisik: hitungTotalNominalUangKertas() + hitungTotalNominalUangLogam() };
        console.log(dataVerbal);
        const response = await simpanVerbalKas(dataVerbal, token as string);
        const responseBody = await response.json();
        console.log(responseBody);
        if (response.status == 200 || response.status == 201) {
            alertSuccess(responseBody.message);
        } else {
            alertError(responseBody.message);
        }
    };

    useEffect(() => {
        hitungTotalUangKertas();
        hitungTotalUangLogam();
    }, [hitungTotalUangKertas, hitungTotalUangLogam]);

    return (
        <div className="container" style={{ width: 1024 }}>
            <div className="card shadow-lg rounded-4">
                <div className="card-header py-3 bg-transparent">
                    <h5 className="m-0">Laporan Verbal</h5>
                </div>
                <div className="card-body">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Tanggal</label>
                                <div className="col-md-4">
                                    <input
                                        className="form-control"
                                        type="date"
                                        value={verbal.tanggal ?? ''}
                                        onChange={(e) => setVerbal((prev) => ({ ...prev, tanggal: e.target.value }))}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <ButtonSubmit
                                        className="btn btn-primary"
                                        onClick={async () => {
                                            await getDataVerbal();
                                        }}
                                    >
                                        Preview
                                    </ButtonSubmit>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-md-6">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Saldo Awal</label>
                                <div className="col-md-8">
                                    <NumericFormat
                                        className="form-control text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        readOnly
                                        value={verbal.saldo_awal_kas ?? ''}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Saldo Akhir</label>
                                <div className="col-md-8">
                                    <NumericFormat
                                        className="form-control text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        readOnly
                                        value={verbal.saldo_akhir_kas ?? ''}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="col-md-6">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Masuk</label>
                                <div className="col-md-8">
                                    <NumericFormat
                                        className="form-control text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        readOnly
                                        value={verbal.masuk ?? ''}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Keluar</label>
                                <div className="col-md-8">
                                    <NumericFormat
                                        className="form-control text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        readOnly
                                        value={verbal.keluar ?? ''}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr className="mb-3 mt-1" />
                    <div className="row">
                        <div className="col-md-6">
                            <div className="row mb-2 text-center">
                                <h6>Uang Logam</h6>
                            </div>
                            <hr className="mt-1" />
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">1000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangLogam?.ul1000 ?? ''}
                                        name="ul1000"
                                        onValueChange={(e) => setDataUangLogam('ul1000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangLogam?.ul1000 ?? 0) * 1000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">500 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangLogam?.ul500 ?? ''}
                                        name="ul500"
                                        onValueChange={(e) => setDataUangLogam('ul500', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangLogam?.ul500 ?? 0) * 500}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">200 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangLogam?.ul200 ?? ''}
                                        name="ul200"
                                        onValueChange={(e) => setDataUangLogam('ul200', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangLogam?.ul200 ?? 0) * 200}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">100 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangLogam?.ul100 ?? ''}
                                        name="ul100"
                                        onValueChange={(e) => setDataUangLogam('ul100', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangLogam?.ul100 ?? 0) * 100}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">50 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangLogam?.ul50 ?? ''}
                                        name="ul50"
                                        onValueChange={(e) => setDataUangLogam('ul50', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangLogam?.ul50 ?? 0) * 50}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">25 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangLogam?.ul25 ?? ''}
                                        name="ul25"
                                        onValueChange={(e) => setDataUangLogam('ul25', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangLogam?.ul25 ?? 0) * 25}
                                        readOnly
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="col-md-6 border-start">
                            <div className="row mb-2 text-center">
                                <h6>Uang Kertas</h6>
                            </div>
                            <hr className="mt-1" />
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">100.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk100000 ?? ''}
                                        name="uk100000"
                                        onValueChange={(e) => setDataUangKertas('uk100000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk100000 ?? 0) * 100000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">75.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk75000 ?? ''}
                                        name="uk75000"
                                        onValueChange={(e) => setDataUangKertas('uk75000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk75000 ?? 0) * 75000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">50.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk50000 ?? ''}
                                        name="uk50000"
                                        onValueChange={(e) => setDataUangKertas('uk50000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk50000 ?? 0) * 50000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">20.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk20000 ?? ''}
                                        name="uk20000"
                                        onValueChange={(e) => setDataUangKertas('uk20000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk20000 ?? 0) * 20000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">10.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk10000 ?? ''}
                                        name="uk10000"
                                        onValueChange={(e) => setDataUangKertas('uk10000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk10000 ?? 0) * 10000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">5.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk5000 ?? ''}
                                        name="uk5000"
                                        onValueChange={(e) => setDataUangKertas('uk5000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk5000 ?? 0) * 5000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">2.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk2000 ?? ''}
                                        name="uk2000"
                                        onValueChange={(e) => setDataUangKertas('uk2000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk2000 ?? 0) * 2000}
                                        readOnly
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">1.000 Rupiah</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={uangKertas?.uk1000 ?? ''}
                                        name="uk1000"
                                        onValueChange={(e) => setDataUangKertas('uk1000', e.value)}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={(uangKertas?.uk1000 ?? 0) * 1000}
                                        readOnly
                                    />
                                </div>
                            </div>
                        </div>
                        <hr className="mb-3 mt-1" />
                        <div className="col-md-6">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Total Uang Logam</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        readOnly
                                        value={hitungTotalUangLogam()}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={hitungTotalNominalUangLogam()}
                                        readOnly
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="col-md-6 border-start">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Total Uang Kertas</label>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        readOnly
                                        value={hitungTotalUangKertas()}
                                    />
                                </div>
                                <div className="col-md-4">
                                    <NumericFormat
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        className="form-control text-end"
                                        value={hitungTotalNominalUangKertas()}
                                        readOnly
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr className="mb-3 mt-1" />
                    <div className="row">
                        <div className="col-md-6">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Total Kas Fisik</label>
                                <div className="col-md-8">
                                    <NumericFormat
                                        className="form-control text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        readOnly
                                        value={hitungTotalNominalUangLogam() + hitungTotalNominalUangKertas()}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Saldo Akhir di buku</label>
                                <div className="col-md-8">
                                    <NumericFormat
                                        className="form-control text-end"
                                        thousandSeparator="."
                                        decimalSeparator=","
                                        readOnly
                                        value={verbal.saldo_akhir_kas ?? ''}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="card-footer py-3 d-flex gap-2 justify-content-between bg-transparent">
                    <Link to={`/app/dashboard`} className="btn btn-danger d-flex gap-2 align-items-center">
                        <ArrowLeft scale={16} />
                        Kembali
                    </Link>
                    <div className="d-flex gap-2">
                        <ButtonSubmit
                            className="btn btn-warning"
                            icon={<Delete scale={18} />}
                            onClick={() => {
                                setUangKertas(undefined);
                                setUangLogam(undefined);
                            }}
                        >
                            Reset
                        </ButtonSubmit>
                        <ButtonSubmit className="btn btn-success" icon={<Save scale={18} />} onClick={async () => await simpanVerbal()}>
                            Simpan
                        </ButtonSubmit>
                    </div>
                </div>
            </div>
        </div>
    );
}