import React, {useEffect, useMemo, useState} from 'react';
import {usePage} from '@inertiajs/react';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';
import {makeGetRequest} from '@/lib/request';
import {notify} from '@/lib/notify';
import {formatCurrency, numberFormat} from '@/lib/numbers';

type ModuleOption = { value: string; label: string };
type NamedOption = { id: number; name: string };
type ReportOptions = {
    attorneys: NamedOption[];
    staff: NamedOption[];
    clients: NamedOption[];
    practice_areas: string[];
};

type ReportPayload = {
    currency: string;
    module: string;
    filters: Record<string, any>;
    modules: ModuleOption[];
    options: ReportOptions;
    data: any;
};

type ReportDashboardProps = {
    initialModule: string;
    title: string;
    subtitle: string;
    allowedModules?: string[];
};

const PERIOD_OPTIONS = [
    {value: 'this_month', label: 'This month'},
    {value: 'last_30_days', label: 'Last 30 days'},
    {value: 'this_quarter', label: 'This quarter'},
    {value: 'this_year', label: 'This year'},
    {value: 'custom', label: 'Custom'},
] as const;

const FORECAST_OPTIONS = [
    {value: 'next_30_days', label: 'Next 30 days'},
    {value: 'next_90_days', label: 'Next 90 days'},
    {value: 'next_6_months', label: 'Next 6 months'},
    {value: 'next_year', label: 'Next year'},
    {value: 'custom', label: 'Custom period'},
] as const;

function titleCase(value?: string | null): string {
    return String(value || '-').replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
}

function dateInputValue(date: Date): string {
    return date.toISOString().slice(0, 10);
}

function getPeriodDates(period: string): {from: string; to: string} {
    const now = new Date();
    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    if (period === 'last_30_days') {
        const start = new Date(end);
        start.setDate(start.getDate() - 29);
        return {from: dateInputValue(start), to: dateInputValue(end)};
    }

    if (period === 'this_quarter') {
        const quarterStartMonth = Math.floor(now.getMonth() / 3) * 3;
        return {
            from: dateInputValue(new Date(now.getFullYear(), quarterStartMonth, 1)),
            to: dateInputValue(end),
        };
    }

    if (period === 'this_year') {
        return {
            from: dateInputValue(new Date(now.getFullYear(), 0, 1)),
            to: dateInputValue(end),
        };
    }

    return {
        from: dateInputValue(new Date(now.getFullYear(), now.getMonth(), 1)),
        to: dateInputValue(end),
    };
}

function StatCard({label, value, detail, tone = 'text-gray-800'}: {label: string; value: string; detail?: string; tone?: string}): JSX.Element {
    return (
        <div className="box h-full">
            <div className="box-body">
                <p className="text-sm text-gray-500 mb-2">{label}</p>
                <p className={`text-2xl font-semibold ${tone}`}>{value}</p>
                {detail ? <p className="text-xs text-gray-400 mt-2">{detail}</p> : null}
            </div>
        </div>
    );
}

function ConfidenceBadge({value}: {value: number}): JSX.Element {
    const tone = value >= 75 ? 'bg-success/10 text-success' : value >= 55 ? 'bg-warning/10 text-warning' : 'bg-danger/10 text-danger';

    return <span className={`inline-flex rounded px-2 py-1 text-xs font-semibold ${tone}`}>{numberFormat(value)}% confidence</span>;
}

function EvidenceList({items}: {items: Record<string, any>}): JSX.Element {
    return (
        <div className="mt-2 flex flex-wrap gap-2">
            {Object.entries(items ?? {}).map(([key, value]) => (
                <span key={key} className="rounded border border-gray-200 px-2 py-1 text-xs text-gray-600">
                    {titleCase(key)}: {typeof value === 'object' ? JSON.stringify(value) : String(value ?? '-')}
                </span>
            ))}
        </div>
    );
}

function InsightList({title, items, labelKey, subjectKey, detailKey}: {title: string; items: any[]; labelKey: string; subjectKey: string; detailKey: string}): JSX.Element {
    return (
        <div className="box h-full">
            <div className="box-header"><h5 className="box-title">{title}</h5></div>
            <div className="box-body space-y-4">
                {items.slice(0, 8).map((item, index) => {
                    const detail = item?.[detailKey];
                    const detailItems = typeof detail === 'object' && !Array.isArray(detail) ? detail : {};

                    return (
                        <div key={`${title}-${index}`} className="border-b border-gray-100 pb-3 last:border-0 last:pb-0">
                            <div className="flex items-start justify-between gap-3">
                                <div>
                                    <p className="text-sm font-semibold text-gray-800">{String(item?.[labelKey] ?? item?.label ?? '-')}</p>
                                    <p className="text-xs text-gray-500">{typeof item?.[subjectKey] === 'object' ? JSON.stringify(item?.[subjectKey]) : String(item?.[subjectKey] ?? item?.explanation ?? '')}</p>
                                </div>
                                {item?.confidence_score !== undefined ? <ConfidenceBadge value={Number(item.confidence_score ?? 0)} /> : null}
                            </div>
                            {Object.keys(detailItems).length ? <EvidenceList items={detailItems} /> : <p className="mt-2 text-xs text-gray-500">{typeof detail === 'string' ? detail : item?.explanation}</p>}
                        </div>
                    );
                })}
                {!items.length ? <p className="text-sm text-gray-500">No items detected.</p> : null}
            </div>
        </div>
    );
}

export default function ReportDashboard({initialModule, title, subtitle, allowedModules}: ReportDashboardProps): JSX.Element {
    const inertiaPage = usePage<{ auth: { user: { token?: string; api_token?: string } } }>();
    const token = inertiaPage.props.auth.user?.token ?? inertiaPage.props.auth.user?.api_token;
    const defaultPeriod = getPeriodDates('this_month');

    const [module, setModule] = useState(initialModule);
    const [period, setPeriod] = useState<(typeof PERIOD_OPTIONS)[number]['value']>('this_month');
    const [fromDate, setFromDate] = useState(defaultPeriod.from);
    const [toDate, setToDate] = useState(defaultPeriod.to);
    const [clientId, setClientId] = useState('');
    const [attorneyId, setAttorneyId] = useState('');
    const [userId, setUserId] = useState('');
    const [practiceArea, setPracticeArea] = useState('');
    const [yearMonth, setYearMonth] = useState(new Date().toISOString().slice(0, 7));
    const [forecastPeriod, setForecastPeriod] = useState<(typeof FORECAST_OPTIONS)[number]['value']>('next_90_days');
    const [analyticsTab, setAnalyticsTab] = useState('clients');
    const [loading, setLoading] = useState(false);
    const [report, setReport] = useState<ReportPayload | null>(null);

    useEffect(() => {
        if (period === 'custom') return;
        const next = getPeriodDates(period);
        setFromDate(next.from);
        setToDate(next.to);
    }, [period]);

    useEffect(() => {
        fetchReport();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [module, fromDate, toDate, clientId, attorneyId, userId, practiceArea, yearMonth, forecastPeriod]);

    async function fetchReport() {
        setLoading(true);
        try {
            const params = new URLSearchParams({module});
            if (module === 'trust') {
                params.append('year_month', yearMonth);
            } else {
                params.append('from', fromDate);
                params.append('to', toDate);
            }
            if (clientId) params.append('client_id', clientId);
            if (attorneyId) params.append('attorney_id', attorneyId);
            if (userId) params.append('user_id', userId);
            if (practiceArea) params.append('practice_area', practiceArea);
            if (module === 'aiAnalytics') params.append('forecast_period', forecastPeriod);

            const res = await makeGetRequest(`/api/reports/overview?${params.toString()}`, {token});
            setReport(res.data?.result ?? null);
        } catch (error: any) {
            notify.toastErrorMessage(error?.response?.data?.message || 'Failed to load report');
        } finally {
            setLoading(false);
        }
    }

    const currency = report?.currency ?? 'USD';
    const options = report?.options ?? {attorneys: [], staff: [], clients: [], practice_areas: []};
    const moduleOptions = useMemo(() => {
        const availableModules = report?.modules ?? [];
        const fallbackModules = [{value: initialModule, label: titleCase(initialModule)}];
        const sourceModules = availableModules.length ? availableModules : fallbackModules;

        return allowedModules?.length
            ? sourceModules.filter(option => allowedModules.includes(option.value))
            : sourceModules;
    }, [allowedModules, initialModule, report?.modules]);
    const showModuleSelector = moduleOptions.length > 1;
    const showAttorneyFilter = ['financial', 'matters', 'aiAnalytics'].includes(module);
    const showClientFilter = ['financial', 'aiAnalytics'].includes(module);
    const showPracticeAreaFilter = ['financial', 'matters', 'aiAnalytics'].includes(module);
    const showStaffFilter = ['productivity', 'operations', 'aiAnalytics'].includes(module);

    const moduleContent = useMemo(() => {
        if (!report) return <div className="box"><div className="box-body text-sm text-gray-500">{loading ? 'Loading report...' : 'No report data available.'}</div></div>;

        if (module === 'aiAnalytics') {
            const data = report.data ?? {};
            const summary = data.summary ?? {};
            const clients = Array.isArray(data.client_intelligence) ? data.client_intelligence : [];
            const matters = Array.isArray(data.matter_intelligence) ? data.matter_intelligence : [];
            const recommendations = Array.isArray(data.recommendations) ? data.recommendations : [];
            const anomalies = Array.isArray(data.anomaly_detection) ? data.anomaly_detection : [];
            const risks = Array.isArray(data.risk_intelligence) ? data.risk_intelligence : [];
            const attorneys = Array.isArray(data.attorney_intelligence) ? data.attorney_intelligence : [];
            const billing = Array.isArray(data.billing_intelligence) ? data.billing_intelligence : [];
            const trust = Array.isArray(data.trust_account_intelligence) ? data.trust_account_intelligence : [];
            const communications = Array.isArray(data.communication_intelligence) ? data.communication_intelligence : [];
            const operations = Array.isArray(data.operational_intelligence) ? data.operational_intelligence : [];
            const patterns = Array.isArray(data.pattern_detection) ? data.pattern_detection : [];
            const forecast = data.financial_forecasting ?? {};
            const forecastPoints = forecast.monthly_revenue_forecast?.points ?? [];
            const analyticsTabs = [
                {
                    id: 'clients',
                    label: 'Client Intelligence',
                    content: (
                        <div className="box">
                            <div className="box-header"><h5 className="box-title">Client Intelligence</h5></div>
                            <div className="box-body overflow-x-auto">
                                <table className="table min-w-full whitespace-nowrap">
                                    <thead><tr><th>Client</th><th>Segment</th><th>Health</th><th>Churn</th><th>Future Value</th><th>Why</th></tr></thead>
                                    <tbody>{clients.slice(0, 10).map((item: any) => <tr key={item.client_id}><td>{item.client_name}</td><td>{item.client_segmentation}</td><td>{numberFormat(Number(item.health_score ?? 0))}%</td><td>{numberFormat(Number(item.estimated_churn_risk ?? 0))}%</td><td>{formatCurrency(Number(item.estimated_future_value ?? 0), currency)}</td><td className="max-w-md whitespace-normal text-xs text-gray-600">{item.explanation}<EvidenceList items={item.key_contributing_factors ?? {}} /></td></tr>)}{!clients.length ? <tr><td colSpan={6} className="py-6 text-center text-gray-500">No client intelligence available.</td></tr> : null}</tbody>
                                </table>
                            </div>
                        </div>
                    ),
                },
                {
                    id: 'matters',
                    label: 'Matter Intelligence',
                    content: (
                        <div className="box">
                            <div className="box-header"><h5 className="box-title">Matter Intelligence</h5></div>
                            <div className="box-body overflow-x-auto">
                                <table className="table min-w-full whitespace-nowrap">
                                    <thead><tr><th>Matter</th><th>Completion</th><th>Budget Risk</th><th>Profit</th><th>Staffing</th><th>Evidence</th></tr></thead>
                                    <tbody>{matters.slice(0, 10).map((item: any) => <tr key={item.matter_id}><td>{item.reference_number}</td><td>{item.estimated_completion_date}</td><td>{numberFormat(Number(item.probability_exceeding_budget ?? 0))}%</td><td>{formatCurrency(Number(item.expected_profitability ?? 0), currency)}</td><td>{item.staffing_efficiency}</td><td className="max-w-sm whitespace-normal"><ConfidenceBadge value={Number(item.confidence_score ?? 0)} /><EvidenceList items={item.key_contributing_factors ?? {}} /></td></tr>)}{!matters.length ? <tr><td colSpan={6} className="py-6 text-center text-gray-500">No matter intelligence available.</td></tr> : null}</tbody>
                                </table>
                            </div>
                        </div>
                    ),
                },
                {id: 'risks', label: 'Risk Intelligence', content: <InsightList title="Risk Intelligence" items={risks} labelKey="risk" subjectKey="subject" detailKey="evidence" />},
                {id: 'anomalies', label: 'Anomaly Detection', content: <InsightList title="Anomaly Detection" items={anomalies} labelKey="type" subjectKey="subject" detailKey="supporting_evidence" />},
                {id: 'patterns', label: 'Pattern Detection', content: <InsightList title="Pattern Detection" items={patterns} labelKey="pattern" subjectKey="trend" detailKey="historical_data_used" />},
                {id: 'attorneys', label: 'Attorney Intelligence', content: <InsightList title="Attorney Intelligence" items={attorneys} labelKey="attorney_name" subjectKey="workload_balance" detailKey="explanation" />},
                {id: 'billing', label: 'Billing Intelligence', content: <InsightList title="Billing Intelligence" items={billing} labelKey="invoice_number" subjectKey="collection_bottlenecks" detailKey="supporting_evidence" />},
                {id: 'trust', label: 'Trust Intelligence', content: <InsightList title="Trust Intelligence" items={trust} labelKey="client_name" subjectKey="expected_replenishment_timing" detailKey="explanation" />},
                {id: 'communications', label: 'Communication Intelligence', content: <InsightList title="Communication Intelligence" items={communications} labelKey="client_name" subjectKey="communication_frequency_trends" detailKey="explanation" />},
                {id: 'operations', label: 'Operational Intelligence', content: <InsightList title="Operational Intelligence" items={operations} labelKey="label" subjectKey="type" detailKey="evidence" />},
            ];
            const selectedAnalyticsTab = analyticsTabs.find(tab => tab.id === analyticsTab) ?? analyticsTabs[0];

            return (
                <>
                    <div className="grid grid-cols-12 gap-5 mb-5">
                        <div className="col-span-12 md:col-span-3"><StatCard label="Forecast Revenue" value={formatCurrency(Number(summary.forecast_revenue ?? 0), currency)} detail={`${numberFormat(Number(summary.confidence ?? 0))}% overall confidence`} /></div>
                        <div className="col-span-12 md:col-span-3"><StatCard label="Outstanding Receivables" value={formatCurrency(Number(summary.outstanding_receivables ?? 0), currency)} tone="text-danger" /></div>
                        <div className="col-span-12 md:col-span-3"><StatCard label="High Risk Items" value={numberFormat(Number(summary.high_risk_items ?? 0))} tone="text-warning" /></div>
                        <div className="col-span-12 md:col-span-3"><StatCard label="Recommendations" value={numberFormat(Number(summary.recommendations ?? 0))} detail="Prioritized by expected business impact" /></div>
                    </div>



                    <div className="grid grid-cols-12 gap-5 mb-5">
                        <div className="col-span-12 xl:col-span-7">
                            <div className="box h-full">
                                <div className="box-header"><h5 className="box-title">Revenue Forecast</h5></div>
                                <div className="box-body">
                                    <div className="grid grid-cols-12 gap-4 mb-4">
                                        <div className="col-span-12 sm:col-span-4"><StatCard label="Quarter Forecast" value={formatCurrency(Number(forecast.quarterly_revenue_forecast?.forecast_total ?? 0), currency)} /></div>
                                        <div className="col-span-12 sm:col-span-4"><StatCard label="Annual Forecast" value={formatCurrency(Number(forecast.annual_revenue_forecast?.forecast_total ?? 0), currency)} /></div>
                                        <div className="col-span-12 sm:col-span-4"><StatCard label="Margin Projection" value={`${numberFormat(Number(forecast.profit_margin_projection ?? 0))}%`} /></div>
                                    </div>
                                    <div className="flex h-44 items-end gap-2 border-b border-gray-200 pt-4">
                                        {forecastPoints.map((point: number, index: number) => {
                                            const maxPoint = Math.max(1, ...forecastPoints.map((item: number) => Number(item)));
                                            return <div key={index} className="flex flex-1 items-end"><div className="w-full rounded-t bg-primary/70" style={{height: `${Math.max(8, (Number(point) / maxPoint) * 100)}%`}} title={formatCurrency(Number(point), currency)} /></div>;
                                        })}
                                        {!forecastPoints.length ? <div className="text-sm text-gray-500">No forecast points available.</div> : null}
                                    </div>
                                    <p className="mt-3 text-sm text-gray-600">{forecast.explanation}</p>
                                </div>
                            </div>
                        </div>
                        <div className="col-span-12 xl:col-span-5">
                            <div className="box h-full">
                                <div className="box-header"><h5 className="box-title">Top Recommendations</h5></div>
                                <div className="box-body space-y-4">
                                    {recommendations.slice(0, 6).map((item: any, index: number) => (
                                        <div key={`${item.action}-${index}`} className="border-b border-gray-100 pb-3 last:border-0 last:pb-0">
                                            <div className="flex items-center justify-between gap-3">
                                                <p className="text-sm font-semibold text-gray-800">{item.action}</p>
                                                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">{item.priority}</span>
                                            </div>
                                            <p className="mt-1 text-xs text-gray-500">Impact: {formatCurrency(Number(item.expected_business_impact ?? 0), currency)}</p>
                                            <ConfidenceBadge value={Number(item.confidence_score ?? 0)} />
                                            <EvidenceList items={item.evidence ?? {}} />
                                        </div>
                                    ))}
                                    {!recommendations.length ? <p className="text-sm text-gray-500">No recommendations generated for the selected filters.</p> : null}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div className="mb-5 border-b border-gray-200">
                            <div className="flex gap-2 overflow-x-auto" role="tablist" aria-label="AI analytics sections">
                                {analyticsTabs.map(tab => (
                                    <button
                                        key={tab.id}
                                        type="button"
                                        role="tab"
                                        aria-selected={selectedAnalyticsTab.id === tab.id}
                                        className={`whitespace-nowrap border-b-2 px-3 py-3 text-sm font-semibold transition-colors ${selectedAnalyticsTab.id === tab.id ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-800'}`}
                                        onClick={() => setAnalyticsTab(tab.id)}
                                    >
                                        {tab.label}
                                    </button>
                                ))}
                            </div>
                        </div>
                        <div role="tabpanel">
                            {selectedAnalyticsTab.content}
                        </div>
                    </div>
                </>
            );
        }

        if (module === 'productivity') {
            const data = report.data ?? {};
            const users = Array.isArray(data.by_user) ? data.by_user : [];
            return (
                <>
                    <div className="grid grid-cols-12 gap-5 mb-5">
                        <div className="col-span-12 md:col-span-4"><StatCard label="Total Billable Hours" value={numberFormat(Number(data.total_billable ?? 0))} detail="Approved billable time in period" /></div>
                        <div className="col-span-12 md:col-span-4"><StatCard label="Total Entries" value={numberFormat(Number(data.total_entries ?? 0))} detail="Approved time entries in period" /></div>
                        <div className="col-span-12 md:col-span-4"><StatCard label="Active Staff In Report" value={numberFormat(users.length)} detail="Staff with matching approved time" /></div>
                    </div>
                    <div className="box">
                        <div className="box-header"><h5 className="box-title">Utilization By Staff</h5></div>
                        <div className="box-body overflow-x-auto">
                            <table className="table whitespace-nowrap min-w-full">
                                <thead><tr><th>Staff</th><th>Billable</th><th>Non-billable</th><th>Utilization</th><th>Billable Value</th></tr></thead>
                                <tbody>
                                {users.map((item: any) => (
                                    <tr key={item.user?.id ?? item.user?.name}>
                                        <td>{item.user?.name ?? '-'}</td>
                                        <td>{numberFormat(Number(item.billable_hours ?? 0))}h</td>
                                        <td>{numberFormat(Number(item.non_billable_hours ?? 0))}h</td>
                                        <td>{numberFormat(Number(item.utilization_rate ?? 0))}%</td>
                                        <td>{formatCurrency(Number(item.billable_value ?? 0), currency)}</td>
                                    </tr>
                                ))}
                                {!users.length ? <tr><td colSpan={5} className="text-center py-6 text-gray-500">No productivity records found.</td></tr> : null}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </>
            );
        }

        if (module === 'matters') {
            const data = report.data ?? {};
            const matters = Array.isArray(data.matters) ? data.matters : [];
            const byStatus = Object.entries(data.by_status ?? {});
            const byPracticeArea = Object.entries(data.by_practice_area ?? {});
            return (
                <>
                    <div className="grid grid-cols-12 gap-5 mb-5">
                        <div className="col-span-12 md:col-span-4"><StatCard label="Total Matters" value={numberFormat(Number(data.total ?? 0))} /></div>
                        <div className="col-span-12 md:col-span-4"><StatCard label="Average Duration" value={`${numberFormat(Number(data.avg_duration_days ?? 0))} days`} detail="Closed-matter average" /></div>
                        <div className="col-span-12 md:col-span-4"><StatCard label="Practice Areas" value={numberFormat(byPracticeArea.length)} detail="Distinct areas in result set" /></div>
                    </div>
                    <div className="grid grid-cols-12 gap-5 mb-5">
                        <div className="col-span-12 xl:col-span-4">
                            <div className="box h-full"><div className="box-header"><h5 className="box-title">By Status</h5></div><div className="box-body space-y-3">{byStatus.map(([status, total]) => <div key={status} className="flex justify-between"><span>{titleCase(status)}</span><span className="font-semibold">{numberFormat(Number(total))}</span></div>)}{!byStatus.length ? <div className="text-sm text-gray-500">No status data.</div> : null}</div></div>
                        </div>
                        <div className="col-span-12 xl:col-span-8">
                            <div className="box"><div className="box-header"><h5 className="box-title">Matter Register</h5></div><div className="box-body overflow-x-auto"><table className="table whitespace-nowrap min-w-full"><thead><tr><th>Reference</th><th>Client</th><th>Practice Area</th><th>Status</th><th>Attorney</th></tr></thead><tbody>{matters.map((matter: any) => <tr key={matter.id}><td>{matter.reference_number}</td><td>{matter.client?.name ?? '-'}</td><td>{matter.practice_area ?? '-'}</td><td>{titleCase(matter.status)}</td><td>{matter.attorney?.name ?? '-'}</td></tr>)}{!matters.length ? <tr><td colSpan={5} className="text-center py-6 text-gray-500">No matters found.</td></tr> : null}</tbody></table></div></div>
                        </div>
                    </div>
                </>
            );
        }

        if (module === 'operations') {
            const data = report.data ?? {};
            return (
                <div className="grid grid-cols-12 gap-5">
                    <div className="col-span-12 md:col-span-4"><StatCard label="Unsubmitted Time" value={numberFormat(Number(data.unsubmitted_time_entries ?? 0))} /></div>
                    <div className="col-span-12 md:col-span-4"><StatCard label="Pending Time Approvals" value={numberFormat(Number(data.pending_time_approvals ?? 0))} tone="text-warning" /></div>
                    <div className="col-span-12 md:col-span-4"><StatCard label="Pending Expense Approvals" value={numberFormat(Number(data.pending_expense_approvals ?? 0))} tone="text-warning" /></div>
                    <div className="col-span-12 md:col-span-4"><StatCard label="Trust Deposits" value={formatCurrency(Number(data.trust_total_deposits ?? 0), currency)} /></div>
                    <div className="col-span-12 md:col-span-4"><StatCard label="Trust Withdrawals" value={formatCurrency(Number(data.trust_total_withdrawals ?? 0), currency)} /></div>
                    <div className="col-span-12 md:col-span-4"><StatCard label="Trust Net Balance" value={formatCurrency(Number(data.trust_net_balance ?? 0), currency)} tone="text-success" /></div>
                </div>
            );
        }

        if (module === 'trust') {
            const data = report.data ?? {};
            const balances = Array.isArray(data.client_balances) ? data.client_balances : [];
            return (
                <>
                    <div className="grid grid-cols-12 gap-5 mb-5">
                        <div className="col-span-12 md:col-span-3"><StatCard label="Period" value={String(data.period ?? yearMonth)} /></div>
                        <div className="col-span-12 md:col-span-3"><StatCard label="Deposits" value={formatCurrency(Number(data.total_deposits ?? 0), currency)} /></div>
                        <div className="col-span-12 md:col-span-3"><StatCard label="Withdrawals" value={formatCurrency(Number(data.total_withdrawals ?? 0), currency)} /></div>
                        <div className="col-span-12 md:col-span-3"><StatCard label="Client Ledger Total" value={formatCurrency(Number(data.sum_of_client_balances ?? 0), currency)} tone="text-success" /></div>
                    </div>
                    <div className="box"><div className="box-header"><h5 className="box-title">Client Trust Balances</h5></div><div className="box-body overflow-x-auto"><table className="table whitespace-nowrap min-w-full"><thead><tr><th>Client</th><th>Balance</th></tr></thead><tbody>{balances.map((item: any) => <tr key={item.client_id}><td>{item.client_name}</td><td>{formatCurrency(Number(item.balance ?? 0), currency)}</td></tr>)}{!balances.length ? <tr><td colSpan={2} className="text-center py-6 text-gray-500">No trust balances found.</td></tr> : null}</tbody></table></div></div>
                </>
            );
        }

        const financial = report.data?.financial ?? {};
        const aging = report.data?.aging ?? {};
        const invoices = Array.isArray(financial.invoices) ? financial.invoices : [];
        return (
            <>
                <div className="grid grid-cols-12 gap-5 mb-5">
                    <div className="col-span-12 md:col-span-3"><StatCard label="Total Billed" value={formatCurrency(Number(financial.total_billed ?? 0), currency)} /></div>
                    <div className="col-span-12 md:col-span-3"><StatCard label="Collected" value={formatCurrency(Number(financial.total_collected ?? 0), currency)} tone="text-success" /></div>
                    <div className="col-span-12 md:col-span-3"><StatCard label="Outstanding" value={formatCurrency(Number(financial.total_outstanding ?? 0), currency)} tone="text-danger" /></div>
                    <div className="col-span-12 md:col-span-3"><StatCard label="Realization Rate" value={`${numberFormat(Number(financial.realization_rate ?? 0))}%`} /></div>
                </div>
                <div className="grid grid-cols-12 gap-5 mb-5">
                    <div className="col-span-12 xl:col-span-4">
                        <div className="box h-full"><div className="box-header"><h5 className="box-title">Receivables Aging</h5></div><div className="box-body space-y-3">{Object.entries(aging).map(([label, total]) => <div key={label} className="flex justify-between"><span>{titleCase(label)}</span><span className="font-semibold">{formatCurrency(Number(total ?? 0), currency)}</span></div>)}</div></div>
                    </div>
                    <div className="col-span-12 xl:col-span-8">
                        <div className="box"><div className="box-header"><h5 className="box-title">Invoices In Scope</h5></div><div className="box-body overflow-x-auto"><table className="table whitespace-nowrap min-w-full"><thead><tr><th>Invoice</th><th>Client</th><th>Status</th><th>Total</th><th>Paid</th><th>Balance</th></tr></thead><tbody>{invoices.map((invoice: any) => <tr key={invoice.id}><td>{invoice.invoice_number}</td><td>{invoice.client?.name ?? '-'}</td><td>{titleCase(invoice.status)}</td><td>{formatCurrency(Number(invoice.total ?? 0), currency)}</td><td>{formatCurrency(Number(invoice.amount_paid ?? 0), currency)}</td><td>{formatCurrency(Number(invoice.balance_due ?? 0), currency)}</td></tr>)}{!invoices.length ? <tr><td colSpan={6} className="text-center py-6 text-gray-500">No invoices found.</td></tr> : null}</tbody></table></div></div>
                    </div>
                </div>
            </>
        );
    }, [report, module, loading, currency, yearMonth, analyticsTab]);

    return (
        <MainLayout>
            <AppPageHeader title={title} subtitle={subtitle} />

            <div className="box mb-5">
                <div className="box-body">
                    <div className="grid grid-cols-12 gap-4">
                        {showModuleSelector ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Module</label>
                                <select className="ti-form-input" value={module} onChange={e => setModule(e.target.value)}>
                                    {moduleOptions.map(option => (
                                        <option key={option.value} value={option.value}>{option.label}</option>
                                    ))}
                                </select>
                            </div>
                        ) : null}
                        <div className="col-span-12 md:col-span-3">
                            <label className="ti-form-label">Period</label>
                            <select className="ti-form-input" value={period} onChange={e => setPeriod(e.target.value as any)} disabled={module === 'trust'}>
                                {PERIOD_OPTIONS.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
                            </select>
                        </div>
                        {module === 'trust' ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Month</label>
                                <input type="month" className="ti-form-input" value={yearMonth} onChange={e => setYearMonth(e.target.value)} />
                            </div>
                        ) : (
                            <>
                                <div className="col-span-12 md:col-span-3">
                                    <label className="ti-form-label">From</label>
                                    <input type="date" className="ti-form-input" value={fromDate} onChange={e => { setPeriod('custom'); setFromDate(e.target.value); }} />
                                </div>
                                <div className="col-span-12 md:col-span-3">
                                    <label className="ti-form-label">To</label>
                                    <input type="date" className="ti-form-input" value={toDate} onChange={e => { setPeriod('custom'); setToDate(e.target.value); }} />
                                </div>
                            </>
                        )}
                        {module === 'aiAnalytics' ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Forecast Horizon</label>
                                <select className="ti-form-input" value={forecastPeriod} onChange={e => setForecastPeriod(e.target.value as any)}>
                                    {FORECAST_OPTIONS.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
                                </select>
                            </div>
                        ) : null}
                        {showAttorneyFilter ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Attorney</label>
                                <select className="ti-form-input" value={attorneyId} onChange={e => setAttorneyId(e.target.value)}>
                                    <option value="">All attorneys</option>
                                    {options.attorneys.map(option => <option key={option.id} value={option.id}>{option.name}</option>)}
                                </select>
                            </div>
                        ) : null}
                        {showClientFilter ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Client</label>
                                <select className="ti-form-input" value={clientId} onChange={e => setClientId(e.target.value)}>
                                    <option value="">All clients</option>
                                    {options.clients.map(option => <option key={option.id} value={option.id}>{option.name}</option>)}
                                </select>
                            </div>
                        ) : null}
                        {showPracticeAreaFilter ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Practice Area</label>
                                <select className="ti-form-input" value={practiceArea} onChange={e => setPracticeArea(e.target.value)}>
                                    <option value="">All practice areas</option>
                                    {options.practice_areas.map(option => <option key={option} value={option}>{option}</option>)}
                                </select>
                            </div>
                        ) : null}
                        {showStaffFilter ? (
                            <div className="col-span-12 md:col-span-3">
                                <label className="ti-form-label">Staff</label>
                                <select className="ti-form-input" value={userId} onChange={e => setUserId(e.target.value)}>
                                    <option value="">All staff</option>
                                    {options.staff.map(option => <option key={option.id} value={option.id}>{option.name}</option>)}
                                </select>
                            </div>
                        ) : null}
                        <div className="col-span-12 flex items-end md:col-span-3">
                            <button
                                type="button"
                                className="ti-btn ti-btn-soft-secondary w-full"
                                onClick={() => {
                                    setPeriod('this_month');
                                    const next = getPeriodDates('this_month');
                                    setFromDate(next.from);
                                    setToDate(next.to);
                                    setClientId('');
                                    setAttorneyId('');
                                    setUserId('');
                                    setPracticeArea('');
                                    setYearMonth(new Date().toISOString().slice(0, 7));
                                    setForecastPeriod('next_90_days');
                                }}
                            >
                                <i className="fa fa-refresh mr-2" />
                                Reset Filters
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {moduleContent}
        </MainLayout>
    );
}