import { getLaporanNominatifDeposito } from '@/api/api_laporan';
import { ButtonSubmit } from '@/components/costum/button_submit';
import { Select } from '@/components/costum/Select';
import { SelectProdukDeposito } from '@/components/costum/SelectProdukDeposito';
import { formatDate, formatNumber, formatTanggal } from '@/helper';
import { Deposito } from '@/types';
import { usePage } from '@inertiajs/react';
import { useCallback, useMemo, useState } from 'react';
import { Modal } from 'react-bootstrap';

const OPTION_STATUS_REKENING = [
    {
        label: '1 : Aktif',
        value: '1',
    },
    {
        label: '3 : Tutup',
        value: '3',
    },
];

export interface LaporanDepositoProps {
    status?: number;
    produk?: string;
}

export default function LaporanNominatifDeposito() {
    const { token } = usePage().props;
    const [laporan, setLaporan] = useState<LaporanDepositoProps>({
        status: 1,
    });

    const modalLaporanDeposito = useModalLaporanDeposito();

    const getLaporan = useCallback(async () => {
        const response = await getLaporanNominatifDeposito(laporan, token as string);
        const responseBody = await response.json();
        console.log(responseBody);
        modalLaporanDeposito.open(responseBody, laporan);
    }, [laporan, modalLaporanDeposito, token]);

    return (
        <>
            <div>
                <div className="container" style={{ width: 640 }}>
                    <div className="card rounded-4 shadow-lg">
                        <div className="card-header py-3 bg-transparent">
                            <h5 className="m-0">Laporan Deposito</h5>
                        </div>
                        <div className="card-body">
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Jangka Waktu</label>
                                <div className="col-md-8">
                                    <SelectProdukDeposito
                                        value={laporan.produk ?? ''}
                                        onChange={(value: string) => {
                                            if (value) {
                                                setLaporan({ ...laporan, produk: value });
                                            } else {
                                                setLaporan({ ...laporan, produk: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                            <div className="row mb-2">
                                <label className="col-form-label col-md-4">Status</label>
                                <div className="col-md-8">
                                    <Select
                                        options={OPTION_STATUS_REKENING}
                                        placeholder="Pilih Status"
                                        value={OPTION_STATUS_REKENING.find((opt) => opt.value === String(laporan.status))}
                                        onChange={(value: unknown) => {
                                            if (value) {
                                                const option = value as { label: string; value: string };
                                                setLaporan({ ...laporan, status: Number(option.value) });
                                            } else {
                                                setLaporan({ ...laporan, status: undefined });
                                            }
                                        }}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="card-footer py-3 justify-content-end d-flex bg-transparent">
                            <ButtonSubmit className="btn btn-primary" onClick={async () => getLaporan()}>
                                Sumbit
                            </ButtonSubmit>
                        </div>
                    </div>
                </div>
            </div>
            {modalLaporanDeposito.modal}
        </>
    );
}

const useModalLaporanDeposito = () => {
    const [show, setShow] = useState<boolean>(false);
    const [laporan, setLaporan] = useState<Deposito[]>([]);
    const [filter, setFilter] = useState<LaporanDepositoProps>();

    const open = (data: Deposito[], filter: LaporanDepositoProps) => {
        setFilter(filter);
        setLaporan(data);
        setShow(true);
    };
    const close = () => setShow(false);

    const modal = useMemo(() => {
        return (
            <Modal show={show} onHide={close} fullscreen>
                <Modal.Header closeButton>
                    <h6 className="m-0">Laporan Deposito</h6>
                </Modal.Header>
                <Modal.Body className="bg-secondary">
                    <div className="bg-white p-3 container" style={{ width: 1024 }}>
                        <div className="text-center">
                            <h6 className="fw-bold">Laporan Nominatif Deposito</h6>
                            <h6>Periode {formatTanggal(new Date().toDateString())}</h6>
                        </div>
                        <table className="table-bordered table-sm table">
                            <thead>
                                <tr className="bg-light">
                                    <th className="text-center" style={{ width: 120 }}>
                                        Rekening
                                    </th>
                                    <th className="text-center" style={{ width: 150 }}>
                                        Produk
                                    </th>
                                    <th className="text-center">Anggota</th>
                                    <th className="text-center" style={{ width: 120 }}>
                                        Nilai Valuta
                                    </th>
                                    <th className="text-center" style={{ width: 120 }}>
                                        Tgl Valuta
                                    </th>
                                    <th className="text-center" style={{ width: 80 }}>
                                        Jkw
                                    </th>
                                    <th className="text-center" style={{ width: 120 }}>
                                        Tgl Jth Tempo
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {laporan?.map((item: Deposito, idx: number) => (
                                    <tr key={item.rekening || idx}>
                                        <td width={120} className="text-center">
                                            {item.rekening}
                                        </td>
                                        <td width={150} className="text-center">
                                            {item.produk?.nama}
                                        </td>
                                        <td>{item.anggota?.nama_lengkap}</td>
                                        <td width={120} className="text-end">
                                            {formatNumber(item.nilai_valuta)}
                                        </td>
                                        <td width={120} className="text-center">
                                            {formatDate(item.tgl_valuta)}
                                        </td>
                                        <td width={80} className="text-center">
                                            {item.jkw}
                                        </td>
                                        <td width={120} className="text-center">
                                            {formatDate(item.tgl_jatuh_tempo)}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                            <tfoot>
                                <tr className="bg-light">
                                    <td colSpan={3} className="fw-bold text-end">
                                        Total
                                    </td>
                                    <td className="fw-bold text-end">
                                        {formatNumber(laporan.reduce((total, item) => total + (item.nilai_valuta ?? 0), 0))}
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </Modal.Body>
                <Modal.Footer></Modal.Footer>
            </Modal>
        );
    }, [laporan, show]);

    return { modal, open, close };
};