import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Button } from 'primereact/button';
import { PageToolbar, PeriodPicker, Period, fmtHKD } from './shared/ui';

const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
const earliestYear = 2021;
const allYears = Array.from({ length: currentYear - earliestYear + 1 }, (_, i) => currentYear - i);
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

type Row = { name: string; in: number; out: number; balance: number };
type Summary = { rows: Row[]; opening: number; in: number; out: number; net: number; closing: number };

const periodLabel = (p: Period) => {
    if (p.year === 'all') return 'all time';
    if (p.month === 'all') return `FY ${p.year}`;
    return `${monthNames[p.month - 1]} ${p.year}`;
};

const signedHKD = (n: number) => (n > 0 ? '+' : n < 0 ? '−' : '') + fmtHKD(Math.abs(n));

const Amount = ({ value, signed = false }: { value: number; signed?: boolean }) => {
    if (!value) return <span className="bs-zero">—</span>;
    if (!signed) return <>{fmtHKD(value)}</>;
    return <span className={value > 0 ? 'bs-pos' : 'bs-neg'}>{signedHKD(value)}</span>;
};

const AccountingBalance = () => {
    const [summary, setSummary] = useState<Summary | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [period, setPeriod] = useState<Period>({ year: currentYear, month: currentMonth });

    const load = async (p: Period) => {
        setIsLoading(true);
        try {
            const params: Record<string, any> = { year: p.year };
            if (p.month !== 'all') params.month = p.month;
            const response = await axios.get('/accounting_balance/summary', { params });
            setSummary(response.data);
        } catch (error: any) {
            console.error('Failed to fetch balance sheet:', error);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => { load(period); }, [period.year, period.month]);

    const label = periodLabel(period);
    const isAllTime = period.year === 'all';

    return (
        <div>
            <PageToolbar
                title="Balance Sheet"
                subtitle={`Money in and out by category, ${label}`}
                filters={<PeriodPicker period={period} years={allYears} onChange={setPeriod} includeAll />}
                actions={<Button icon="pi pi-refresh" onClick={() => load(period)} className="p-button-text p-button-sm" aria-label="Refresh" />}
            />

            {!summary ? (
                <div className="card card--pad" style={{ color: 'var(--mute)' }}>Loading…</div>
            ) : (
                <div style={{ opacity: isLoading ? 0.55 : 1, transition: 'opacity .15s' }}>
                    {/* Reconciliation: opening + in − out = closing */}
                    <div className="card bs-recon">
                        {!isAllTime && (
                            <>
                                <div className="bs-recon__cell">
                                    <span className="bs-recon__label">Opening balance</span>
                                    <span className="bs-recon__value mono">{signedHKD(summary.opening)}</span>
                                    <span className="bs-recon__hint">Carried in from before {label}</span>
                                </div>
                                <span className="bs-recon__op">+</span>
                            </>
                        )}
                        <div className="bs-recon__cell">
                            <span className="bs-recon__label">Money in</span>
                            <span className="bs-recon__value mono" style={{ color: 'var(--green-d)' }}>{fmtHKD(summary.in)}</span>
                        </div>
                        <span className="bs-recon__op">−</span>
                        <div className="bs-recon__cell">
                            <span className="bs-recon__label">Money out</span>
                            <span className="bs-recon__value mono" style={{ color: 'var(--bad)' }}>{fmtHKD(summary.out)}</span>
                        </div>
                        <span className="bs-recon__op">=</span>
                        <div className="bs-recon__cell bs-recon__cell--result">
                            <span className="bs-recon__label">Closing balance</span>
                            <span className="bs-recon__value mono">{signedHKD(summary.closing)}</span>
                            <span className="bs-recon__hint">End of {label}</span>
                        </div>
                    </div>

                    <div className="card">
                        <table className="table bs-table">
                            <thead>
                                <tr>
                                    <th>Category</th>
                                    <th className="num">In</th>
                                    <th className="num">Out</th>
                                    <th className="num">Net</th>
                                </tr>
                            </thead>
                            <tbody>
                                {summary.rows.map(row => (
                                    <tr key={row.name} className={!row.in && !row.out ? 'is-idle' : ''}>
                                        <td>{row.name}</td>
                                        <td className="num mono"><Amount value={row.in} /></td>
                                        <td className="num mono"><Amount value={row.out} /></td>
                                        <td className="num mono"><Amount value={row.balance} signed /></td>
                                    </tr>
                                ))}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td>Net change, {label}</td>
                                    <td className="num mono">{fmtHKD(summary.in)}</td>
                                    <td className="num mono">{fmtHKD(summary.out)}</td>
                                    <td className="num mono"><Amount value={summary.net} signed /></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            )}
        </div>
    );
};

export default AccountingBalance;