// One admin report destination, drawn from its definition: counts for the chosen period and location.
import { useEffect, useMemo, useState, type CSSProperties } from 'react';
import { ChevronLeft } from 'lucide-react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Alert, AlertDescription } from '../../../components/ui/alert';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../components/ui/select';
import { PrintableRegion } from '../../../components/ui/print-record';
import { relayServerFailure } from '../../../utils/fetchFailureMessage';
import { downloadBlob } from '../../../utils/downloadBlob';
import { ALL_LOCATIONS, COMPARISON_LABELS, filtersFromSearch, formatRange, reportRequestKey, searchFromFilters, type ReportComparison } from './reportPeriod';
import {
    formatValue,
    practiceReportCsv,
    practiceReportCsvFilename,
    usePracticeReport,
    type PracticeReport,
} from './practiceReport';
import { chartTableOf, definitionOf, type ReportDefinition, type ReportMeasure, type Tone } from './reportDefinitions';
import './ReportsPage.css';
import { EmptyState } from '../../../components/ui/empty-state';

const UP = String.fromCharCode(0x2191);
const DOWN = String.fromCharCode(0x2193);
const DOT = ' ' + String.fromCharCode(0x00b7) + ' ';

export function describeMeasureChange(measure: ReportMeasure, report: PracticeReport): { text: string; tone: Tone } | null {
    if (!report.comparison) return null;
    const current = report.totals[measure.key];
    const previous = report.comparison.totals[measure.key];
    if (typeof current !== 'number' || typeof previous !== 'number') return null;
    const against = ' vs ' + formatRange(report.comparison.range.start, report.comparison.range.end, report.compare === 'year');
    const change = current - previous;
    if (change === 0) return { text: 'No change' + against, tone: '' };
    const size = measure.percent && previous > 0
        ? Math.round((Math.abs(change) / previous) * 100) + '%'
        : formatValue(Math.abs(change), measure.format);
    const rising = change > 0;
    const tone: Tone = !measure.better ? '' : (rising === (measure.better === 'up') ? 'good' : 'bad');
    return { text: (rising ? UP : DOWN) + ' ' + size + against, tone };
}

const ReportChart = ({ definition, report }: { definition: ReportDefinition; report: PracticeReport }) => {
    const chart = definition.chart;
    if (chart.kind === 'weeks') {
        const weeks = report.weeks ?? [];
        const peak = Math.max(1, ...weeks.flatMap((week) => chart.series.map((series) => week.values[series.key] ?? 0)));
        return (
            <div
                className="report-chart ak-card ak-card--panel"
                role="img"
                aria-label={chart.title + '. ' + weeks.map((week) => formatRange(week.start, week.end, false) + ': '
                    + chart.series.map((series) => formatValue(week.values[series.key] ?? 0, chart.format) + ' ' + series.label.toLowerCase()).join(', ') + '.').join(' ')}
            >
                <ChartHead definition={definition} />
                <div className="chart-bars">
                    {weeks.map((week) => (
                        <span className="chart-period" key={week.start}>
                            <span className="chart-stack">
                                {chart.series.map((series) => (
                                    <i key={series.key} className={series.tone} style={{ '--bar': (week.values[series.key] ?? 0) / peak } as CSSProperties} />
                                ))}
                            </span>
                            <small>{formatRange(week.start, week.end, false)}</small>
                        </span>
                    ))}
                </div>
            </div>
        );
    }
    const lines = chart.lines(report);
    const peak = Math.max(1, ...lines.map((line) => line.value));
    return (
        <div
            className="report-chart ak-card ak-card--panel"
            role="img"
            aria-label={chart.title + '. ' + lines.map((line) => line.label + ': ' + line.text + '.').join(' ')}
        >
            <ChartHead definition={definition} />
            <div className="chart-lines">
                {lines.map((line) => (
                    <span className="chart-line" key={line.key}>
                        <span>{line.label}</span>
                        <span className="chart-track">
                            <i className={line.tone} style={{ '--bar': line.value / peak } as CSSProperties} />
                        </span>
                        <strong>{line.text}</strong>
                    </span>
                ))}
            </div>
        </div>
    );
};

const ChartHead = ({ definition }: { definition: ReportDefinition }) => (
    <div className="report-chart-head">
        <span>
            <b className="ak-card__title">{definition.chart.title}</b>
            <span className="ak-card__meta">{definition.chart.meta}</span>
        </span>
        <span className="report-legend ak-legend">
            {definition.chart.legend.map(([label, tone]) => <span key={label}><i className={tone} />{label}</span>)}
        </span>
    </div>
);

const initialsOf = (name: string) => name.replace(/^(Dr|Mr|Mrs|Ms|Mx)\.?\s+/i, '').split(/\s+/).filter(Boolean)
    .map((part) => part[0]).filter((_, index, all) => index === 0 || index === all.length - 1).join('').toUpperCase();

const PracticeReportPage = () => {
    const navigate = useNavigate();
    const { kind } = useParams();
    const definition = definitionOf(kind);
    const [params, setParams] = useSearchParams();
    const search = params.toString();
    const filters = useMemo(() => filtersFromSearch(new URLSearchParams(search)), [search]);
    const loadReport = usePracticeReport();
    const [loaded, setLoaded] = useState<{ key: string; report: PracticeReport }>();
    const [error, setError] = useState<string>();
    const requestKey = definition ? reportRequestKey(definition.kind, filters) : '';

    useEffect(() => {
        if (!definition) return;
        let live = true;
        setError(undefined);
        loadReport(definition.kind, filters)
            .then((result) => { if (live) setLoaded({ key: reportRequestKey(definition.kind, filters), report: result }); })
            .catch((failure) => {
                if (!live) return;
                setLoaded(undefined);
                setError(relayServerFailure(failure, 'This report could not be loaded. Please try again.'));
            });
        return () => { live = false; };
    }, [loadReport, definition, filters]);

    if (!definition) {
        return <p className="ak-status-line ak-status-line--error" role="alert">This report does not exist.</p>;
    }

    const report = loaded?.report;
    const current = loaded && loaded.key === requestKey ? loaded.report : undefined;
    const place = definition.practiceWide
        ? 'All locations'
        : report?.locations.find((location) => location.id === filters.location)?.name ?? 'All locations';
    const period = formatRange(filters.start, filters.end);
    const backToReports = () => navigate('/dashboard/reports?' + searchFromFilters(filters));
    const setComparison = (compare: ReportComparison) => setParams(searchFromFilters({ ...filters, compare }));

    const downloadCsv = () => {
        if (!current) return;
        const csv = practiceReportCsv(definition.title, current, place, definition.measures, definition.table, chartTableOf(definition.chart, current));
        downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), practiceReportCsvFilename(definition.kind, current));
    };

    return (
        <PrintableRegion className="ak-reports">
            <div className="ak-report-head">
                <div>
                    <h1 className="ak-page-title ahr-view-title">{definition.title}</h1>
                    <p className="ak-page-title__sub">{definition.subtitle}</p>
                </div>
                <div className="ak-report-actions" data-print-hidden="true">
                    <button type="button" className="btn btn-blue-ghost" onClick={() => window.print()} disabled={!current}>
                        Print / Save as PDF
                    </button>
                    <button type="button" className="btn btn-blue-ghost" onClick={downloadCsv} disabled={!current}>
                        Download CSV
                    </button>
                </div>
            </div>

            <div className="ak-page-body">
            <p className="ak-report-print-filters">
                {period + DOT + place}
                {current?.comparison ? DOT + 'Compared with ' + formatRange(current.comparison.range.start, current.comparison.range.end) : ''}
            </p>

            <div className="ak-toolbar report-toolbar" data-print-hidden="true">
                <button type="button" className="back-link" onClick={backToReports}><ChevronLeft aria-hidden="true" />Reports</button>
                <span className="range">{period + DOT + place}</span>
                <div className="report-field">
                    <span className="ak-card__description">Compare with</span>
                    <Select value={filters.compare} onValueChange={(value) => setComparison(value as ReportComparison)}>
                        <SelectTrigger aria-label="Compare with"><SelectValue /></SelectTrigger>
                        <SelectContent>
                            {COMPARISON_LABELS.map(([value, label]) => <SelectItem key={value} value={value}>{label}</SelectItem>)}
                        </SelectContent>
                    </Select>
                </div>
                <button type="button" className="btn btn-blue-ghost" onClick={backToReports}>Change filters</button>
            </div>

            {error ? (
                <Alert variant="destructive">
                    <AlertDescription>{error}</AlertDescription>
                </Alert>
            ) : null}

            {current ? (
                <>
                    {definition.note ? <div className="report-source ak-notice">{definition.note}</div> : null}
                    {definition.practiceWide && filters.location !== ALL_LOCATIONS ? (
                        <div className="report-source ak-notice">{definition.practiceWide}</div>
                    ) : null}

                    <div className="report-summary">
                        {definition.measures.map((measure) => {
                            const change = describeMeasureChange(measure, current);
                            return (
                                <div key={measure.key} className={('report-stat ak-card ak-card--panel ' + measure.tone).trim()}>
                                    <b className="ak-metric__value">{formatValue(current.totals[measure.key], measure.format)}</b>
                                    <span className="ak-metric__label">{measure.label}</span>
                                    {change ? <span className={('delta ak-metric__delta ' + change.tone).trim()}>{change.text}</span> : null}
                                </div>
                            );
                        })}
                    </div>

                    <ReportChart definition={definition} report={current} />

                    <div className="ak-card ak-card--panel ak-table-wrap mt-3">
                        <table className="report-table ak-table">
                            <thead>
                                <tr>
                                    <th>{definition.table.first}</th>
                                    {definition.table.columns.map((column) => (
                                        <th key={column.key} className={column.format === 'text' ? undefined : 'ak-table__num'}>{column.label}</th>
                                    ))}
                                </tr>
                            </thead>
                            <tbody>
                                {current.rows.length === 0 ? (
                                    <tr><td colSpan={definition.table.columns.length + 1}><EmptyState size="compact" title={definition.table.empty} /></td></tr>
                                ) : current.rows.map((row) => (
                                    <tr key={row.key}>
                                        <td>
                                            {definition.table.person ? (
                                                <span className="report-person">
                                                    <span className="ak-avatar ak-avatar--sm rounded-full" aria-hidden="true">{initialsOf(row.label)}</span>
                                                    {definition.table.drill?.(row.key, filters, current.timezone) ? (
                                                        <button type="button" className="ak-link text-left" onClick={() => navigate(definition.table.drill!(row.key, filters, current.timezone)!)}>
                                                            {row.label}
                                                        </button>
                                                    ) : row.label}
                                                </span>
                                            ) : definition.table.drill?.(row.key, filters, current.timezone) ? (
                                                <button type="button" className="ak-link text-left" onClick={() => navigate(definition.table.drill!(row.key, filters, current.timezone)!)}>
                                                    <b>{row.label}</b>
                                                </button>
                                            ) : <b>{row.label}</b>}
                                        </td>
                                        {definition.table.columns.map((column) => (
                                            <td key={column.key} className={column.format === 'text' ? undefined : 'ak-table__num'}>
                                                {formatValue(row.values[column.key], column.format, current.timezone)}
                                            </td>
                                        ))}
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    <div className="report-source ak-notice">
                        {definition.footer.text}
                        <button type="button" className="btn btn-blue" data-print-hidden="true" onClick={() => navigate(definition.footer.to)}>
                            {definition.footer.action}
                        </button>
                    </div>
                </>
            ) : !error ? (
                <p className="ak-status-line" role="status">Loading the report&hellip;</p>
            ) : null}
            </div>
        </PrintableRegion>
    );
};

export default PracticeReportPage;