import React, { useMemo } from 'react';
import type { CarePlanReadStatus } from './useEncounterCarePlan';
import type { CarePlan, Goal, Observation, Task } from 'fhir/r4';
import { Check, Loader2, TriangleAlert, Lock } from 'lucide-react';
import type { NoteDraftStatus } from './useEncounterClinicalNote';
import { describeActivity } from '../../../utils/planActivity';
import { goalProgress } from '../../../utils/goalProgress';
import { carePlanAuthorship } from '../../../utils/carePlanAuthorship';
import type { PlanSharing } from '../../../utils/carePlanTeam';
import { EmptyState } from '../../../components/ui/empty-state';

// The care plan, written from the visit.
//
// A THIRD TAB BESIDE THE TWO NOTES, and the drawing says why: the tabset already means "what I am
// writing right now", and both notes in it already behave the way a plan needs to - a draft as you type,
// finished later, with a reminder if the visit ends first. This INHERITS that vocabulary rather than
// reimplementing it, which is why the status words below are the note's own `NoteDraftStatus`.
//
// The plan outlives the encounter, unlike either note. That is said by where it appears afterwards, not
// by making it awkward to write here.

/**
 * The same words the clinical note uses, for the same reason it uses them: a draft that failed to save
 * must never be quiet. The clinician has been taught to stop thinking about saving, so an unreported
 * failure is worse than no autosave at all.
 */
const DRAFT_LABEL: Record<NoteDraftStatus, React.ReactNode> = {
    idle: null,
    'draft-saving': <span className="inline-flex items-center gap-1 text-muted-foreground"><Loader2 className="w-3 h-3 animate-spin" />Saving draft…</span>,
    'draft-saved': <span className="inline-flex items-center gap-1 text-muted-foreground"><Check className="w-3 h-3" />Draft · saved as you type</span>,
    'draft-failed': <span className="inline-flex items-center gap-1 text-destructive font-medium"><TriangleAlert className="w-3 h-3" />Draft NOT saved — this plan only exists in this browser.</span>,
    'draft-conflict': <span className="inline-flex items-center gap-1 text-destructive font-medium"><TriangleAlert className="w-3 h-3" />This plan was changed in another window. Autosave is off — copy your changes before leaving.</span>,
};

// Once given to the patient the plan is no longer a draft, so autosave is saving the plan itself.
const RELEASED_LABEL: Record<NoteDraftStatus, React.ReactNode> = {
    ...DRAFT_LABEL,
    'draft-saving': <span className="inline-flex items-center gap-1 text-muted-foreground"><Loader2 className="w-3 h-3 animate-spin" />Saving…</span>,
    'draft-saved': <span className="inline-flex items-center gap-1 text-muted-foreground"><Check className="w-3 h-3" />Saved as you type</span>,
    'draft-failed': <span className="inline-flex items-center gap-1 text-destructive font-medium"><TriangleAlert className="w-3 h-3" />Change NOT saved — it only exists in this browser.</span>,
};

export interface CarePlanEditorProps {
    plan?: CarePlan;
    /** Defaults to 'ready': a caller that passes no status has a read that answered. */
    readStatus?: CarePlanReadStatus;
    activities: Task[];
    goals: Goal[];
    /** Every reading for this patient. Progress is derived from these, never stored. */
    observations: Observation[];
    currentOrganizationId?: string;
    draftStatus?: NoteDraftStatus;
    onAddInstruction?: () => void;
    onAddMeasurement?: () => void;
    onAddGoal?: () => void;
    onAttachGoal?: () => void;
    onGiveToPatient?: () => void;
    /** Which collaboration team is running this plan, when one is. */
    sharing?: PlanSharing;
    onShareWithTeam?: () => void;
}

export const CarePlanEditor: React.FC<CarePlanEditorProps> = ({
    plan,
    activities,
    goals,
    observations,
    currentOrganizationId,
    draftStatus = 'idle',
    readStatus = 'ready',
    onAddInstruction,
    onAddMeasurement,
    onAddGoal,
    onAttachGoal,
    onGiveToPatient,
    sharing,
    onShareWithTeam,
}) => {
    const authorship = useMemo(
        () => carePlanAuthorship(plan, { currentOrganizationId }),
        [plan, currentOrganizationId],
    );

    // Read-only is decided ONCE, here, and every control below reads it. The alternative - each control
    // deciding for itself - is how one of them stays live on somebody else's plan.
    // Only a plan whose latest read answered is edited; not on the strength of an older read.
    const readOnly = !authorship.mayEdit || readStatus !== 'ready';

    if (!plan && readStatus === 'loading') {
        return <div className="text-sm text-muted-foreground">Loading the care plan...</div>;
    }

    // No Start button here: a plan may exist that this read could not see. A refusal hides a plan read
    // earlier too.
    if (readStatus === 'refused' || (!plan && readStatus === 'failed')) {
        return (
            <div role="alert" className="text-sm text-destructive">
                {readStatus === 'refused'
                    ? "You do not have access to this patient's care plan."
                    : 'The care plan could not be loaded, so it is not known whether this patient has one. Reopen the visit to try again.'}
            </div>
        );
    }

    if (!plan) {
        return (
            <div className="text-sm text-muted-foreground">
                No care plan for this visit yet.
                {onAddInstruction && (
                    <div className="mt-2 flex gap-2">
                        <button type="button" className="btn btn-blue-sm" onClick={onAddInstruction}>
                            Start a care plan
                        </button>
                    </div>
                )}
            </div>
        );
    }

    return (
        <div className="space-y-4" data-testid="care-plan-editor">
            {readStatus === 'failed' && (
                <div role="alert" className="text-sm text-destructive">
                    The care plan could not be refreshed, so this may be out of date. Changes are off until it
                    loads; reopen the visit to try again.
                </div>
            )}
            {/* Says it is not yours BEFORE anything is typed, rather than refusing at save - which would
                already have cost the work. */}
            {authorship.isFromAnotherPractice && (
                <div className="flex items-start gap-1.5 rounded-md bg-amber-50 px-3 py-2 text-sm text-amber-900">
                    <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                    <span>{authorship.readOnlyReason}</span>
                </div>
            )}

            <div className="text-sm">
                <span className="text-muted-foreground">For </span>
                <b>{plan.title || plan.description || 'this plan'}</b>
            </div>

            {/* WHICH TEAM IS RUNNING IT, and deliberately not "who can see it". A practitioner on the
                team already holds full-clinical access to the patient through the patient-approved
                referral Consent, patient-wide rather than plan-scoped - so the attachment says whose
                work this is and hands nobody a key. Wording it as permission would be a promise the
                attachment does not make. */}
            {(sharing || (!readOnly && onShareWithTeam)) && (
                <div className="text-sm">
                    <span className="text-muted-foreground">Shared with </span>
                    {sharing
                        ? <b>{sharing.label}</b>
                        : <span className="text-muted-foreground">no collaboration team</span>}
                    {!readOnly && onShareWithTeam && (
                        <button type="button" className="btn btn-blue-ghost-sm ml-2" onClick={onShareWithTeam}>
                            {sharing ? 'Change' : 'Share with a team'}
                        </button>
                    )}
                </div>
            )}

            <section>
                <h4 className="mb-1.5 text-sm font-semibold">What the patient does</h4>
                {activities.length === 0 ? (
                    <EmptyState size="compact" title="Nothing yet" />
                ) : (
                    <ul className="space-y-1.5">
                        {activities.map((activity) => {
                            const described = describeActivity(activity);
                            return (
                                <li key={activity.id} className="text-sm">
                                    <div>{activity.description}</div>
                                    <div className="text-muted-foreground">
                                        {described.label} {described.detail}
                                        {described.stopsWhenGoalReached && ' · Stops when the goal is reached'}
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                )}
                {!readOnly && (onAddInstruction || onAddMeasurement) && (
                    <div className="mt-2 flex gap-2">
                        {onAddInstruction && (
                            <button type="button" className="btn btn-blue-ghost-sm" onClick={onAddInstruction}>
                                Add an instruction
                            </button>
                        )}
                        {onAddMeasurement && (
                            <button type="button" className="btn btn-blue-ghost-sm" onClick={onAddMeasurement}>
                                Add a measurement
                            </button>
                        )}
                    </div>
                )}
            </section>

            <section>
                <h4 className="mb-1.5 text-sm font-semibold">What it is working towards</h4>
                {goals.length === 0 ? (
                    <EmptyState size="compact" title="Nothing yet" />
                ) : (
                    <ul className="space-y-1.5">
                        {goals.map((goal) => {
                            // Derived here, at read time, from the observations that exist. Nothing on the
                            // goal stores a number - a stored one is a frozen snapshot that goes wrong the
                            // moment anything else writes a reading.
                            const progress = goalProgress(goal, observations);
                            return (
                                <li key={goal.id} className="text-sm">
                                    <div>
                                        {goal.description?.text}
                                        {progress && (
                                            <>
                                                {' '}
                                                <b>
                                                    {progress.startValue} &rarr; {progress.targetValue}
                                                </b>
                                            </>
                                        )}
                                    </div>
                                    <div className="text-muted-foreground">
                                        {progress
                                            ? `${progress.direction === 'down' ? 'Lower' : 'Higher'} is better`
                                            : 'No direction set — this goal cannot show progress yet'}
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                )}
                {/* Each control needs its OWN handler, not just write access. A button whose onClick is
                    undefined renders live and does nothing when pressed, which is worse than an absent
                    one - it is the same dead-end this editor exists to avoid, wearing the clothes of a
                    working feature. "Attach an existing goal" was exactly that until it was wired. */}
                {!readOnly && (onAddGoal || onAttachGoal) && (
                    <div className="mt-2 flex gap-2">
                        {onAddGoal && (
                            <button type="button" className="btn btn-blue-ghost-sm" onClick={onAddGoal}>
                                Add a goal
                            </button>
                        )}
                        {onAttachGoal && (
                            <button type="button" className="btn btn-blue-ghost-sm" onClick={onAttachGoal}>
                                Attach an existing goal
                            </button>
                        )}
                    </div>
                )}
            </section>

            <div className="flex items-center justify-between border-t border-border pt-2">
                <div className="text-xs">{(plan.status === 'draft' ? DRAFT_LABEL : RELEASED_LABEL)[draftStatus]}</div>
                {!readOnly && plan.status === 'draft' && onGiveToPatient && (
                    <button type="button" className="btn btn-green-sm" onClick={onGiveToPatient}>
                        Give it to the patient
                    </button>
                )}
            </div>
        </div>
    );
};

export default CarePlanEditor;