import React, { useEffect, useRef, useState } from 'react';
import type { SaveOperation } from '../../../../utils/saveOperation';
import type { Goal, Observation, Task } from 'fhir/r4';
import { HeartPulse, UserRoundPen } from 'lucide-react';
import { GoalRowCard } from './GoalRowCard';
import { goalHistory, type GoalRow, type GoalSource } from '../../../../utils/goalRow';
import { EmptyState } from '../../../../components/ui/empty-state';
import { chartableReadings } from '../../../../utils/goalChart';
import { formatShortDate } from '../../../../utils/dateUtils';
import { GoalChart } from './GoalChart';
import './GoalDetail.css';

// A goal, opened: where it stands, and the readings that moved it.
//
// WHAT MOVES IT IS THE POINT OF THE SCREEN. The bar above is derived from exactly this list, so showing
// the list is what makes the bar checkable rather than something the patient has to take on trust.
//
// NEWEST FIRST, and each says where it came from - "a weight the patient logged and one taken at the
// practice are not the same kind of fact", the same provenance distinction medications already draw.

interface Props {
    goal: Goal;
    row: GoalRow;
    source?: GoalSource;
    observations: Observation[];
    /** The patient's tasks, so a day that passed unanswered appears rather than leaving a gap. */
    tasks?: Task[];
    /**
     * Offered only for a goal the patient set themselves.
     *
     * A PLAN GOAL IS MOVED BY ANSWERING THE PLAN'S MEASUREMENT, which is the path that records the
     * reading against the activity that asked for it. A second way in from here would let a patient log
     * outside the activity, leaving the activity still owed and the plan's own history incomplete.
     */
    onLogReading?: (value: number, opening?: SaveOperation) => Promise<void> | void;
    /** Starts this detail's opening: choosing another goal or leaving this one retires a reading not yet sent. */
    startOpening?: () => SaveOperation;
    /** An earlier logged reading still to be settled: shown above the form, and nothing more is logged until it is. */
    readingNotice?: React.ReactNode;
    /** The readings are still being read. */
    readingsLoading?: boolean;
    /** The readings could not be read, so no list is not the same as no readings. */
    readingsFailed?: boolean;
    /**
     * `pane` is the patient's goals deck: a labelled card beside the list on a laptop, under it on a
     * tablet, and the page itself on a phone, with what moves it as a second card. `sheet` is the
     * staff sheet it has always been.
     */
    variant?: 'sheet' | 'pane';
}

export const GoalDetail: React.FC<Props> = ({
    goal, row, source, observations, tasks, onLogReading, startOpening, readingNotice, readingsLoading = false, readingsFailed = false,
    variant = 'sheet',
}) => {
    const pane = variant === 'pane';
    const [value, setValue] = useState('');
    const [busy, setBusy] = useState(false);
    const opening = useRef<SaveOperation>();
    useEffect(() => {
        const mine = startOpening?.();
        opening.current = mine;
        return () => mine?.retire();
    }, [startOpening]);

    const history = goalHistory(goal, observations, tasks ?? []);
    const readings = chartableReadings(goal, observations);
    // Spencer 2026-09-03: a line over time here, the bar only on the list. One reading is said, not drawn.
    const chart = readingsFailed || readings.length === 0
        ? null
        : readings.length === 1
            ? (
                <p className="text-sm text-muted-foreground">
                    One reading so far, on {formatShortDate(readings[0].on)}. The line starts with the next one.
                </p>
            )
            : <GoalChart goal={goal} observations={observations} />;
    const unusable = value.trim() === '' || !Number.isFinite(Number(value));

    const log = async (event: React.FormEvent) => {
        event.preventDefault();
        if (!onLogReading || unusable || busy || readingNotice) return;

        setBusy(true);
        try {
            const mine = opening.current;
            await onLogReading(Number(value), mine);
            if (mine && !mine.belongs()) return;
            setValue('');
        } finally {
            if (!opening.current || opening.current.belongs()) setBusy(false);
        }
    };

    return (
        <div className={pane ? 'ak-gl-pane' : 'space-y-4 p-4 pr-10'}>
            {pane && <h2 className="ak-section-title ak-gl__h3 ak-gl-pane__label">{row.title}</h2>}
            <div className={pane ? 'ak-card ak-card--panel ak-gl-pane__card' : 'space-y-4'}>
            <GoalRowCard row={row} source={source} chart={chart} />

            {onLogReading && readingNotice}
            {onLogReading && (
                <form className="flex items-end gap-2" onSubmit={log}>
                    <div className="flex-1">
                        <label className="ak-label" htmlFor="goal-reading">
                            Log a reading
                        </label>
                        <input id="goal-reading" inputMode="decimal" value={value}
                            className="ak-field mt-1"
                            onChange={(event) => setValue(event.target.value)} />
                    </div>
                    <button type="submit" className="btn btn-green-sm" disabled={unusable || busy || Boolean(readingNotice)}>Log it</button>
                </form>
            )}
            </div>

            <section className={pane ? 'ak-gl-pane__moves' : undefined}>
                <h3 className={pane ? 'ak-section-title ak-gl__h3' :'mb-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground'}>
                    What moves it
                </h3>
                <div className={pane ? 'ak-card ak-card--panel ak-gl-pane__card ak-gl-pane__readings' : undefined}>
                {readingsFailed ? (
                    <p role="alert" className="ak-notice ak-notice--error">
                        The readings for this goal could not be loaded just now, so its progress may be out of date.
                    </p>
                ) : history.length === 0 && readingsLoading ? (
                    <p className="text-sm text-muted-foreground">Loading readings…</p>
                ) : history.length === 0 ? (
                    // Stated rather than drawn as an empty box. A goal with no readings yet is a normal
                    // thing to be looking at, and a blank space says only that something is missing.
                    <EmptyState
                        size="compact"
                        title="No readings yet"
                        description="The line starts as soon as there is one."
                    />
                ) : (
                    <ul className="divide-y divide-border">
                        {history.map((entry, index) => (
                            <li className="flex items-baseline gap-3 py-1.5 text-sm"
                                key={`${entry.kind}-${entry.on}-${index}`}>
                                <span className="w-20 flex-none text-muted-foreground">{entry.date}</span>
                                {/* A MISSED DAY IS THE QUIETEST INK ON THE ROW, and that is a rule rather
                                    than taste: amber means OWED, and a missed day is no longer owed. It is
                                    history, not a reprimand - it is here so a run of them reads as a
                                    pattern instead of a gap somebody has to notice. */}
                                {entry.kind === 'missed' ? (
                                    <span className="flex-1 text-muted-foreground">— missed</span>
                                ) : (
                                    <>
                                        <span className="flex-1 tabular-nums text-foreground">{entry.value}</span>
                                        {/* A glyph per the deck: the pen is a self-report, the pulse a
                                            measurement. The words stay as the name and the tooltip. */}
                                        <span className="ak-goal-reading__who" role="img" aria-label={entry.who}
                                            title={entry.who}
                                            data-source={entry.source === 'patient' ? 'self' : 'measured'}>
                                            {entry.source === 'patient'
                                                ? <UserRoundPen aria-hidden="true" />
                                                : <HeartPulse aria-hidden="true" />}
                                        </span>
                                    </>
                                )}
                            </li>
                        ))}
                    </ul>
                )}
                </div>
            </section>
        </div>
    );
};

export default GoalDetail;