// The reports overview: one period and location scope every report destination.
import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { CalendarDays, ChevronRight } from 'lucide-react';
import { Alert, AlertDescription } from '../../../components/ui/alert';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../components/ui/select';
import { relayServerFailure } from '../../../utils/fetchFailureMessage';
import {
    ALL_LOCATIONS,
    PRESET_LABELS,
    filtersFromSearch,
    presetRange,
    searchFromFilters,
    type ReportFilters,
    type ReportPreset,
} from './reportPeriod';
import { useSchedulingReport, type SchedulingReport } from './schedulingReport';
import { formatValue, usePracticeReport, type PracticeReport } from './practiceReport';
import { REPORT_DEFINITIONS, type ReportDefinition, type ReportMeasure } from './reportDefinitions';
import './ReportsPage.css';

const MAX_DAYS = 366;
const DAY_MS = 86400000;

export function rangeProblem(filters: ReportFilters): string | undefined {
    if (!filters.start || !filters.end) return 'Choose a start and an end date.';
    if (filters.start > filters.end) return 'The end date must be on or after the start date.';
    const days = (Date.parse(filters.end) - Date.parse(filters.start)) / DAY_MS + 1;
    if (days > MAX_DAYS) return 'Choose a period of a year or less.';
    return undefined;
}

const count = (report: SchedulingReport | undefined, value: (report: SchedulingReport) => number) =>
    report ? value(report).toLocaleString() : String.fromCharCode(0x2014);

const DOT = ' ' + String.fromCharCode(0x00b7) + ' ';

// Each destination reads its own headline counts, so one slow or refused report does not hold up the rest.
const PracticeReportRow = ({ definition, filters }: { definition: ReportDefinition; filters: ReportFilters }) => {
    const navigate = useNavigate();
    const loadReport = usePracticeReport();
    const [report, setReport] = useState<PracticeReport>();
    const [failed, setFailed] = useState(false);

    useEffect(() => {
        let live = true;
        setReport(undefined);
        setFailed(false);
        loadReport(definition.kind, { ...filters, compare: 'none' })
            .then((result) => { if (live) setReport(result); })
            .catch(() => { if (live) setFailed(true); });
        return () => { live = false; };
    }, [loadReport, definition, filters]);

    const Icon = definition.icon;
    const value = (measure: ReportMeasure) => formatValue(report ? report.totals[measure.key] : null, measure.format);
    return (
        <button
            type="button"
            className="report-row"
            onClick={() => navigate('/dashboard/reports/' + definition.kind + '?' + searchFromFilters(filters))}
        >
            <span className="report-icon"><Icon className="size-[18px]" aria-hidden="true" /></span>
            <span className="report-name">
                <b className="ak-card__title ak-card__title--lead">{definition.title}</b>
                <span className="ak-card__meta report-about">{failed ? 'This report could not be loaded.' : definition.about}</span>
                <span className="ak-card__meta report-line">
                    {failed ? 'This report could not be loaded.' : definition.overview.map((measure) => value(measure) + ' ' + measure.label).join(DOT)}
                </span>
            </span>
            {definition.overview.map((measure) => (
                <span key={measure.key} className={('metric ' + measure.tone).trim()}>
                    <b>{value(measure)}</b>
                    <span className="ak-metric__label">{measure.label}</span>
                </span>
            ))}
            <ChevronRight className="ak-chev" aria-hidden="true" />
        </button>
    );
};

const ReportsPage = () => {
    const navigate = useNavigate();
    const [params, setParams] = useSearchParams();
    const search = params.toString();
    const applied = useMemo(() => filtersFromSearch(new URLSearchParams(search)), [search]);
    const [draft, setDraft] = useState(applied);
    const [problem, setProblem] = useState<string>();
    const loadScheduling = useSchedulingReport();
    const [report, setReport] = useState<SchedulingReport>();
    const [error, setError] = useState<string>();

    useEffect(() => setDraft(applied), [applied]);

    useEffect(() => {
        let live = true;
        setError(undefined);
        loadScheduling({ ...applied, compare: 'none' })
            .then((result) => { if (live) setReport(result); })
            .catch((failure) => {
                if (!live) return;
                setReport(undefined);
                setError(relayServerFailure(failure, 'The reports could not be loaded. Please try again.'));
            });
        return () => { live = false; };
    }, [loadScheduling, applied]);

    const choosePreset = (preset: ReportPreset) => {
        const range = presetRange(preset);
        setDraft((current) => ({ ...current, preset, ...(range ?? {}) }));
    };

    const chooseDate = (key: 'start' | 'end', value: string) =>
        setDraft((current) => ({ ...current, preset: 'custom', [key]: value }));

    const update = () => {
        const reason = rangeProblem(draft);
        setProblem(reason);
        if (!reason) setParams(searchFromFilters(draft));
    };

    return (
        <div className="ak-reports">
            <div className="ak-report-head">
                <div>
                    <h1 className="ak-page-title ahr-view-title">Reports</h1>
                    <p className="ak-page-title__sub">
                        See how care moves through the practice, where work is waiting and how the organization is performing.
                    </p>
                </div>
            </div>

            <div className="ak-page-body">
            <form
                className="report-filters"
                aria-label="Report filters"
                noValidate
                onSubmit={(event) => { event.preventDefault(); update(); }}
            >
                <div className="report-field period">
                    <label className="ak-label" htmlFor="report-period">Period</label>
                    <Select value={draft.preset} onValueChange={(value) => choosePreset(value as ReportPreset)}>
                        <SelectTrigger id="report-period" className="w-full"><SelectValue /></SelectTrigger>
                        <SelectContent>
                            {PRESET_LABELS.map(([value, label]) => <SelectItem key={value} value={value}>{label}</SelectItem>)}
                        </SelectContent>
                    </Select>
                </div>
                <div className="report-field">
                    <label className="ak-label" htmlFor="report-from">From</label>
                    <input id="report-from" type="date" value={draft.start} max={draft.end || undefined} onChange={(event) => chooseDate('start', event.target.value)} />
                </div>
                <div className="report-field">
                    <label className="ak-label" htmlFor="report-to">To</label>
                    <input id="report-to" type="date" value={draft.end} min={draft.start || undefined} onChange={(event) => chooseDate('end', event.target.value)} />
                </div>
                <div className="report-field location">
                    <label className="ak-label" htmlFor="report-location">Location</label>
                    <Select value={draft.location} onValueChange={(location) => setDraft((current) => ({ ...current, location }))}>
                        <SelectTrigger id="report-location" className="w-full"><SelectValue /></SelectTrigger>
                        <SelectContent>
                            <SelectItem value={ALL_LOCATIONS}>All locations</SelectItem>
                            {(report?.locations ?? []).map((location) => (
                                <SelectItem key={location.id} value={location.id}>{location.name}</SelectItem>
                            ))}
                            {draft.location !== ALL_LOCATIONS && !report?.locations.some((location) => location.id === draft.location) ? (
                                <SelectItem value={draft.location}>Selected location</SelectItem>
                            ) : null}
                        </SelectContent>
                    </Select>
                </div>
                <button type="submit" className="btn btn-blue">Update reports</button>
            </form>
            {problem ? <div className="ak-notice ak-notice--error mb-3" role="alert">{problem}</div> : null}

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

            <div className="report-list" data-slot="card">
                <button
                    type="button"
                    className="report-row"
                    onClick={() => navigate('/dashboard/reports/scheduling?' + searchFromFilters(applied))}
                >
                    <span className="report-icon"><CalendarDays className="size-[18px]" aria-hidden="true" /></span>
                    <span className="report-name">
                        <b className="ak-card__title ak-card__title--lead">Scheduling &amp; access</b>
                        <span className="ak-card__meta report-about">Appointment outcomes and usable capacity</span>
                        <span className="ak-card__meta report-line">
                            {count(report, (value) => value.totals.scheduled)} appointments &middot;{' '}
                            {count(report, (value) => value.totals.completed)} completed &middot;{' '}
                            {count(report, (value) => value.totals.noShow)} no-shows
                        </span>
                    </span>
                    <span className="metric"><b>{count(report, (value) => value.totals.scheduled)}</b><span className="ak-metric__label">appointments</span></span>
                    <span className="metric good"><b>{count(report, (value) => value.totals.completed)}</b><span className="ak-metric__label">completed</span></span>
                    <span className="metric bad"><b>{count(report, (value) => value.totals.noShow)}</b><span className="ak-metric__label">no-shows</span></span>
                    <ChevronRight className="ak-chev" aria-hidden="true" />
                </button>
                {REPORT_DEFINITIONS.map((definition) => (
                    <PracticeReportRow key={definition.kind} definition={definition} filters={applied} />
                ))}
            </div>

            <div className="report-source ak-notice"><span><b>About these numbers:</b> reports use records saved in Akashic. Scheduled coverage is not a payroll timecard.</span></div>
            </div>
        </div>
    );
};

export default ReportsPage;