// Scheduling & access: what happened to scheduled visits in the chosen period and location.
import { useEffect, useMemo, useState } from 'react';
import { ChevronLeft } from 'lucide-react';
import { useNavigate, 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 {
    COMPARISON_LABELS,
    filtersFromSearch,
    formatRange,
    reportRequestKey,
    searchFromFilters,
    type ReportComparison,
} from './reportPeriod';
import {
    locationLabel,
    schedulingCsv,
    schedulingCsvFilename,
    useSchedulingReport,
    type SchedulingCounts,
    type SchedulingReport,
} from './schedulingReport';
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) + ' ';

type Tone = 'good' | 'warn' | 'bad' | '';

interface Measure {
    key: keyof SchedulingCounts;
    label: string;
    tone: Tone;
    // Which direction is good news; scheduled volume is neither.
    better?: 'up' | 'down';
    percent?: boolean;
}

const MEASURES: Measure[] = [
    { key: 'scheduled', label: 'appointments', tone: '' },
    { key: 'completed', label: 'completed', tone: 'good', better: 'up', percent: true },
    { key: 'cancelled', label: 'cancelled', tone: 'warn', better: 'down' },
    { key: 'noShow', label: 'no-shows', tone: 'bad', better: 'down' },
];

export function describeChange(measure: Measure, report: SchedulingReport): { text: string; tone: Tone } | null {
    if (!report.comparison) return null;
    const current = report.totals[measure.key];
    const previous = report.comparison.totals[measure.key];
    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) + '%'
        : Math.abs(change).toLocaleString();
    const rising = change > 0;
    const tone: Tone = !measure.better ? '' : (rising === (measure.better === 'up') ? 'good' : 'bad');
    return { text: (rising ? UP : DOWN) + ' ' + size + against, tone };
}

const share = (part: number, whole: number) => (whole > 0 ? Math.round((part / whole) * 100) : 0) + '%';

const SchedulingReportPage = () => {
    const navigate = useNavigate();
    const [params, setParams] = useSearchParams();
    const search = params.toString();
    const filters = useMemo(() => filtersFromSearch(new URLSearchParams(search)), [search]);
    const loadScheduling = useSchedulingReport();
    const [loaded, setLoaded] = useState<{ key: string; report: SchedulingReport }>();
    const [error, setError] = useState<string>();
    const requestKey = reportRequestKey('scheduling', filters);

    useEffect(() => {
        let live = true;
        setError(undefined);
        loadScheduling(filters)
            .then((result) => { if (live) setLoaded({ key: reportRequestKey('scheduling', 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; };
    }, [loadScheduling, filters]);

    const report = loaded?.report;
    const current = loaded && loaded.key === requestKey ? loaded.report : undefined;
    const place = locationLabel(report, filters.location);
    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;
        downloadBlob(new Blob([schedulingCsv(current, place)], { type: 'text/csv;charset=utf-8' }), schedulingCsvFilename(current));
    };

    const peak = Math.max(1, ...(current?.weeks ?? []).flatMap((week) => [week.completed, week.cancelled, week.noShow]));
    const barHeight = (value: number) => ({ height: Math.round((value / peak) * 78) + 'px', minHeight: value > 0 ? undefined : 0 });

    return (
        <PrintableRegion className="ak-reports">
            <div className="ak-report-head">
                <div>
                    <h1 className="ak-page-title ahr-view-title">Scheduling &amp; access</h1>
                    <p className="ak-page-title__sub">What happened to scheduled visits and where capacity remains.</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 ? (
                <>
                    <div className="report-summary">
                        {MEASURES.map((measure) => {
                            const change = describeChange(measure, current);
                            return (
                                <div key={measure.key} className={('report-stat ak-card ak-card--panel ' + measure.tone).trim()}>
                                    <b className="ak-metric__value">{current.totals[measure.key].toLocaleString()}</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>

                    <div
                        className="report-chart ak-card ak-card--panel"
                        role="img"
                        aria-label={'Appointment outcomes by week. ' + current.weeks.map((week) =>
                            formatRange(week.start, week.end, false) + ': ' + week.completed + ' completed, ' + week.cancelled + ' cancelled, ' + week.noShow + ' no-show.').join(' ')}
                    >
                        <div className="report-chart-head">
                            <span>
                                <b className="ak-card__title">Appointment outcomes by week</b>
                                <span className="ak-card__meta">Completed, cancelled and no-show visits</span>
                            </span>
                            <span className="report-legend ak-legend">
                                <span><i className="good" />Completed</span>
                                <span><i className="warn" />Cancelled</span>
                                <span><i className="bad" />No-show</span>
                            </span>
                        </div>
                        <div className="chart-bars">
                            {current.weeks.map((week) => (
                                <span className="chart-period" key={week.start}>
                                    <span className="chart-stack">
                                        <i className="good" style={barHeight(week.completed)} />
                                        <i className="warn" style={barHeight(week.cancelled)} />
                                        <i className="bad" style={barHeight(week.noShow)} />
                                    </span>
                                    <small>{formatRange(week.start, week.end, false)}</small>
                                </span>
                            ))}
                        </div>
                    </div>

                    <div className="ak-card ak-card--panel ak-table-wrap mt-3">
                    <table className="report-table ak-table">
                        <thead>
                            <tr>
                                <th>Location</th>
                                <th className="ak-table__num">Appointments</th>
                                <th className="ak-table__num">Completed</th>
                                <th className="ak-table__num">Cancelled</th>
                                <th className="ak-table__num">No-show</th>
                            </tr>
                        </thead>
                        <tbody>
                            {current.byLocation.length === 0 ? (
                                <tr><td colSpan={5}><EmptyState size="compact" title="No appointments were scheduled in this period." /></td></tr>
                            ) : current.byLocation.map((row) => (
                                <tr key={row.locationId ?? row.name}>
                                    <td>
                                        <b>{row.name}</b>
                                        <div className="report-bar" aria-hidden="true">
                                            <i className="good" style={{ width: share(row.completed, row.scheduled) }} />
                                            <i className="warn" style={{ width: share(row.cancelled, row.scheduled) }} />
                                            <i className="bad" style={{ width: share(row.noShow, row.scheduled) }} />
                                        </div>
                                    </td>
                                    <td className="ak-table__num">{row.scheduled.toLocaleString()}</td>
                                    <td className="ak-table__num">{row.completed.toLocaleString()}</td>
                                    <td className="ak-table__num">{row.cancelled.toLocaleString()}</td>
                                    <td className="ak-table__num">{row.noShow.toLocaleString()}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    </div>

                    {current.totals.other > 0 ? (
                        <div className="report-source ak-notice">
                            {'The remaining ' + current.totals.other.toLocaleString() + (current.totals.other === 1 ? ' appointment is' : ' appointments are') + ' booked, arrived or checked in.'}
                            <button type="button" className="btn btn-blue" data-print-hidden="true" onClick={() => navigate('/dashboard/appointments')}>
                                Open Appointments
                            </button>
                        </div>
                    ) : null}
                </>
            ) : !error ? (
                <p className="ak-status-line" role="status">Loading the report&hellip;</p>
            ) : null}
            </div>
        </PrintableRegion>
    );
};

export default SchedulingReportPage;