import React, { useState } from 'react';
import type { Patient } from 'fhir/r4';
import { CarePlanEditor } from './CarePlanEditor';
import { useEncounterCarePlan } from './useEncounterCarePlan';
import type { PlanRecurrence } from '../../../utils/carePlanAuthoring';
import { deriveGoalDirection } from '../../../utils/goalProgress';
import {
    DEFAULT_TRACKABLE_MEASURE,
    findTrackableMeasure,
    TRACKABLE_MEASURES,
} from '../../../utils/trackableMeasures';
import { EmptyState } from '../../../components/ui/empty-state';
import { useSaveScope } from '../../../utils/saveOperation';

// The care plan tab's contents: the hook that holds the plan, the forms that add to it, and the panel
// that draws it.
//
// SPLIT FROM THE EDITOR ON PURPOSE. `CarePlanEditor` takes everything as props and calls no service, so
// a test can render it with a plan from another practice and assert directly that it offers nothing it
// cannot do. This file is the only part needing a live service context.
//
// EVERY ADD ASKS FOR WHAT IT NEEDS, and that is not ceremony. A goal created with placeholder numbers
// would have a start equal to its target, which `goalProgress` refuses to draw - so the practitioner
// would get a goal that silently shows nothing and no clue why. A control that creates a resource
// nobody can use is worse than one that is not there.

type OpenForm = 'none' | 'plan' | 'instruction' | 'measurement' | 'goal' | 'attach-goal' | 'team';

const field = 'mt-1 w-full rounded border border-border p-1.5 text-sm';

// `listsOtherPractices`: off where the page already lists every plan beside the builder.
export const EncounterCarePlanPanel: React.FC<{ patient?: Patient; listsOtherPractices?: boolean }> = ({ patient, listsOtherPractices = true }) => {
    const carePlan = useEncounterCarePlan(patient);
    const [open, setOpen] = useState<OpenForm>('none');
    const [busy, setBusy] = useState(false);
    const [text, setText] = useState('');
    // WHAT IS MEASURED AND ITS UNIT ARE ONE ANSWER, taken from the shared catalogue rather than typed.
    // A goal and the measurement feeding it must carry the SAME coding or the goal silently never moves,
    // and a free-text unit beside a fixed code was the shape that let those two drift apart.
    const [measureKey, setMeasureKey] = useState(DEFAULT_TRACKABLE_MEASURE.key);
    const [frequency, setFrequency] = useState<PlanRecurrence>('weekly');
    const [startValue, setStartValue] = useState('');
    const [targetValue, setTargetValue] = useState('');
    const [teamId, setTeamId] = useState('');
    const [attachGoalId, setAttachGoalId] = useState('');
    // A change that may have saved unconfirmed holds every change until a read shows it or the clinician releases it.
    const held = Boolean(carePlan.unconfirmed);
    const locked = busy || held;

    const reset = () => {
        setOpen('none');
        setText('');
        setStartValue('');
        setTargetValue('');
    };

    // What is typed belongs to the patient and the person signed in: another of either empties every form and
    // frees the panel, so nothing typed for one is added for the next.
    const panelScope = useSaveScope(patient?.id ? `${patient.id}|${carePlan.currentOrganizationId ?? ''}` : undefined, () => {
        reset();
        setTeamId('');
        setAttachGoalId('');
        setMeasureKey(DEFAULT_TRACKABLE_MEASURE.key);
        setFrequency('weekly');
        setBusy(false);
    });

    // One at a time. Each Add is one decision the clinician made, and letting a second start before the
    // first has come back would reorder the plan under them.
    // A change that was not saved keeps its form and choice open, so trying again is a decision.
    const submit = async (operation: () => Promise<boolean>) => {
        if (locked) return;
        const mine = panelScope.start();
        setBusy(true);
        try {
            if (await operation() && mine.belongs()) reset();
        } finally {
            if (mine.belongs()) setBusy(false);
            mine.retire();
        }
    };

    const reloadPlan = async () => {
        if (busy) return;
        const mine = panelScope.start();
        setBusy(true);
        try {
            await carePlan.reload();
        } finally {
            if (mine.belongs()) setBusy(false);
            mine.retire();
        }
    };

    if (!patient) {
        return <p className="text-sm text-muted-foreground">No patient.</p>;
    }

    const measure = findTrackableMeasure(measureKey) ?? DEFAULT_TRACKABLE_MEASURE;
    const nothingTyped = !text.trim();
    const goalNumbersUnusable =
        !Number.isFinite(Number(startValue))
        || !Number.isFinite(Number(targetValue))
        || startValue.trim() === ''
        || targetValue.trim() === ''
        || Number(startValue) === Number(targetValue);

    return (
        <div className="space-y-3">
            {carePlan.unconfirmed && (
                <div role="status" className="flex flex-wrap items-center gap-2 text-sm text-destructive">
                    <span>{carePlan.unconfirmed}</span>
                    <button type="button" className="btn btn-blue-ghost-sm" disabled={busy} onClick={() => void reloadPlan()}>
                        Reload
                    </button>
                    {carePlan.mayRetry && (
                        <button type="button" className="btn btn-red-ghost-sm" disabled={busy} onClick={carePlan.retry}>
                            Let me add it again
                        </button>
                    )}
                </div>
            )}
            <CarePlanEditor
                plan={carePlan.plan}
                activities={carePlan.activities}
                goals={carePlan.goals}
                observations={carePlan.observations}
                currentOrganizationId={carePlan.currentOrganizationId}
                draftStatus={carePlan.draftStatus}
                readStatus={carePlan.readStatus}
                {...(held ? {} : {
                    onAddInstruction: () => setOpen(carePlan.plan ? 'instruction' : 'plan'),
                    onAddMeasurement: () => setOpen('measurement'),
                    onAddGoal: () => setOpen('goal'),
                })}
                {...(!held && carePlan.attachableGoals.length > 0
                    ? {
                        onAttachGoal: () => {
                            setAttachGoalId(carePlan.attachableGoals[0]?.id ?? '');
                            setOpen('attach-goal');
                        },
                    }
                    : {})}
                {...(carePlan.sharing ? { sharing: carePlan.sharing } : {})}
                {...(held ? {} : {
                    onShareWithTeam: () => {
                        setTeamId(carePlan.sharing?.teamId ?? '');
                        setOpen('team');
                    },
                    onGiveToPatient: () => void submit(() => carePlan.giveToPatient()),
                })}
            />

            {open === 'attach-goal' && (
                <form className="rounded-md border border-border p-2" onSubmit={(e) => {
                    e.preventDefault();
                    void submit(() => carePlan.attachGoal(attachGoalId));
                }}>
                    <label className="text-sm font-medium" htmlFor="care-plan-attach-goal">
                        Which goal is this plan working towards?
                    </label>
                    {/* SAID BECAUSE IT IS EASY TO ASSUME THE OPPOSITE. Attaching adds this plan to the
                        goal; it does not move the goal, take it over, or change who set it. A goal the
                        patient set stays theirs and keeps saying so on their goals page. */}
                    <p className="mt-1 text-xs text-muted-foreground">
                        This adds the plan to the goal. It does not change who set it, and the goal keeps
                        any other plan it belongs to.
                    </p>
                    <select id="care-plan-attach-goal" className={field} value={attachGoalId}
                        onChange={(e) => setAttachGoalId(e.target.value)}>
                        {carePlan.attachableGoals.map((goal) => (
                            <option key={goal.id} value={goal.id}>
                                {goal.description?.text || 'Untitled goal'}
                            </option>
                        ))}
                    </select>
                    <div className="mt-2 flex gap-2">
                        <button type="submit" className="btn btn-green-sm" disabled={locked || !attachGoalId}>
                            Attach it
                        </button>
                        <button type="button" className="btn btn-red-ghost-sm" onClick={reset}>Cancel</button>
                    </div>
                </form>
            )}

            {open === 'team' && (
                <form className="rounded-md border border-border p-2" onSubmit={(e) => {
                    e.preventDefault();
                    void submit(() => carePlan.shareWithTeam(teamId || undefined));
                }}>
                    <label className="text-sm font-medium" htmlFor="care-plan-team">
                        Which collaboration team is running this plan?
                    </label>
                    {/* SAID HERE, WHERE THE DECISION IS MADE. A practitioner reasonably reads "share" as
                        "grant access", and it is not: everyone on the team already reads this patient's
                        record through the referral consent the patient approved. Leaving that unsaid
                        would let somebody attach a plan believing it opened a door, or refuse to
                        believing it opened one. */}
                    <p className="mt-1 text-xs text-muted-foreground">
                        This records whose work the plan is. It does not change who can read the
                        patient's record — the team already can.
                    </p>
                    {carePlan.teams.length === 0 ? (
                        <EmptyState
                            size="compact"
                            title="No shared team"
                            description="This patient is on no collaboration team you belong to."
                        />
                    ) : (
                        <select id="care-plan-team" className={field} value={teamId}
                            onChange={(e) => setTeamId(e.target.value)}>
                            <option value="">No team</option>
                            {carePlan.teams.map((team) => (
                                <option key={team.teamId} value={team.teamId}>{team.name}</option>
                            ))}
                        </select>
                    )}
                    <div className="mt-2 flex gap-2">
                        <button type="submit" className="btn btn-green-sm"
                            disabled={locked || carePlan.teams.length === 0}>
                            Save
                        </button>
                        <button type="button" className="btn btn-red-ghost-sm" onClick={reset}>Cancel</button>
                    </div>
                </form>
            )}

            {open === 'plan' && (
                <form className="rounded-md border border-border p-2" onSubmit={(e) => {
                    e.preventDefault();
                    void submit(() => carePlan.startPlan(text.trim()));
                }}>
                    <label className="text-sm font-medium" htmlFor="care-plan-title">What is this plan for?</label>
                    <input id="care-plan-title" className={field} value={text}
                        placeholder="Type 2 diabetes"
                        onChange={(e) => setText(e.target.value)} />
                    <div className="mt-2 flex gap-2">
                        <button type="submit" className="btn btn-green-sm" disabled={locked || nothingTyped}>Start the plan</button>
                        <button type="button" className="btn btn-red-ghost-sm" onClick={reset}>Cancel</button>
                    </div>
                </form>
            )}

            {open === 'instruction' && (
                <form className="rounded-md border border-border p-2" onSubmit={(e) => {
                    e.preventDefault();
                    void submit(() => carePlan.addInstruction({ description: text.trim() }));
                }}>
                    <label className="text-sm font-medium" htmlFor="care-plan-instruction">What should the patient do?</label>
                    <input id="care-plan-instruction" className={field} value={text}
                        placeholder="Take metformin 1000mg, twice daily"
                        onChange={(e) => setText(e.target.value)} />
                    {/* Says what it will become, because "standing" is a real behaviour rather than a
                        default: it will not be something the patient ticks off. */}
                    <p className="mt-1 text-xs text-muted-foreground">
                        A standing instruction — not something the patient ticks off.
                    </p>
                    <div className="mt-2 flex gap-2">
                        <button type="submit" className="btn btn-green-sm" disabled={locked || nothingTyped}>Add it</button>
                        <button type="button" className="btn btn-red-ghost-sm" onClick={reset}>Cancel</button>
                    </div>
                </form>
            )}

            {open === 'measurement' && (
                <form className="rounded-md border border-border p-2" onSubmit={(e) => {
                    e.preventDefault();
                    void submit(() => carePlan.addMeasurement({
                        description: text.trim(),
                        measure: measure.code,
                        unit: measure.unit,
                        frequency,
                    }));
                }}>
                    <label className="text-sm font-medium" htmlFor="care-plan-measurement">What should the patient measure?</label>
                    <input id="care-plan-measurement" className={field} value={text}
                        placeholder="Weigh yourself and log it"
                        onChange={(e) => setText(e.target.value)} />
                    <div className="mt-2 flex gap-2">
                        <label className="text-sm">
                            What is measured
                            <select className={field} value={measureKey}
                                onChange={(e) => setMeasureKey(e.target.value)}>
                                {TRACKABLE_MEASURES.map((option) => (
                                    <option key={option.key} value={option.key}>{option.label}</option>
                                ))}
                            </select>
                        </label>
                        <label className="text-sm">
                            How often
                            <select className={field} value={frequency}
                                onChange={(e) => setFrequency(e.target.value as PlanRecurrence)}>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="monthly">Monthly</option>
                                <option value="annually">Yearly</option>
                            </select>
                        </label>
                    </div>
                    <div className="mt-2 flex gap-2">
                        <button type="submit" className="btn btn-green-sm" disabled={locked || nothingTyped}>Add it</button>
                        <button type="button" className="btn btn-red-ghost-sm" onClick={reset}>Cancel</button>
                    </div>
                </form>
            )}

            {open === 'goal' && (
                <form className="rounded-md border border-border p-2" onSubmit={(e) => {
                    e.preventDefault();
                    const direction = deriveGoalDirection(Number(startValue), Number(targetValue));
                    if (!direction) return;
                    void submit(() => carePlan.addGoal({
                        description: text.trim(),
                        measure: measure.code,
                        startValue: Number(startValue),
                        targetValue: Number(targetValue),
                        unit: measure.unit,
                        direction,
                    }));
                }}>
                    <label className="text-sm font-medium" htmlFor="care-plan-goal">What is the patient working towards?</label>
                    <input id="care-plan-goal" className={field} value={text}
                        placeholder="Lose weight"
                        onChange={(e) => setText(e.target.value)} />
                    {/* On a phone the measure takes its own row, so its name is not cut off under the chevron. */}
                    <div className="mt-2 flex flex-wrap gap-2">
                        <label className="text-sm flex-1">
                            From
                            <input className={field} inputMode="decimal" value={startValue}
                                onChange={(e) => setStartValue(e.target.value)} />
                        </label>
                        <label className="text-sm flex-1">
                            To
                            <input className={field} inputMode="decimal" value={targetValue}
                                onChange={(e) => setTargetValue(e.target.value)} />
                        </label>
                        <label className="text-sm basis-full sm:basis-auto sm:flex-1">
                            What is measured
                            <select className={field} value={measureKey}
                                onChange={(e) => setMeasureKey(e.target.value)}>
                                {TRACKABLE_MEASURES.map((option) => (
                                    <option key={option.key} value={option.key}>{option.label}</option>
                                ))}
                            </select>
                        </label>
                    </div>
                    {/* Refused rather than saved as a goal that cannot draw: an equal start and target is
                        a zero range, which `goalProgress` declines, so it would render as a goal that
                        shows nothing with no clue why. */}
                    <div className="mt-2 flex gap-2">
                        <button type="submit" className="btn btn-green-sm"
                            disabled={locked || nothingTyped || goalNumbersUnusable}>
                            Add it
                        </button>
                        <button type="button" className="btn btn-red-ghost-sm" onClick={reset}>Cancel</button>
                    </div>
                </form>
            )}

            {/* Read-only and never what Add opens: another practice's plan does not stand in for this one's. */}
            {listsOtherPractices && carePlan.otherPracticePlans.map((other) => (
                <CarePlanEditor
                    key={other.plan.id}
                    plan={other.plan}
                    activities={other.activities}
                    goals={other.goals}
                    observations={carePlan.observations}
                    currentOrganizationId={carePlan.currentOrganizationId}
                    readStatus={carePlan.readStatus}
                />
            ))}
        </div>
    );
};

export default EncounterCarePlanPanel;