import { ChevronRight } from "lucide-react";
import type { CareTeam } from "fhir/r4";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../../../../components/ui/dialog";
import { OrgBadge } from "../../../../components/ui/org-badge";
import { Progress } from "../../../../components/ui/progress";
import { Skeleton } from "../../../../components/ui/skeleton";
import type { PlanStep } from "../../../../utils/carePlanSteps";
import type { PlanCard, PlanGoal } from "./carePlanRows";

/**
 * ONE PLAN, OPENED OVER THE LIST - the deck's "the plan itself", a dialog on a phone and on a laptop
 * alike, with the trail behind it still reading Care plans because an overlay has no trail of its own.
 *
 * KEYED BY THE PLAN. Everything inside is drawn for exactly one plan id, and moving to another remounts
 * it, so nothing drawn for the last plan can stand under the next one's title. A plan asked for by id
 * that the list has not delivered yet is still loading; one the answered list does not hold is said to
 * be missing, never drawn from whatever was open before.
 *
 * Its steps are the Tasks based on it; steps that could not be read are never "Nothing is on this plan yet".
 */

export interface PlanStepsRead {
    /** The plan's tasks and readings have answered. */
    answered: boolean;
    failed: boolean;
    stepsFor: (planId: string) => PlanStep[];
}

export interface PlanTeamsRead {
    answered: boolean;
    failed: boolean;
    teams: readonly CareTeam[];
}

const GoalRow = ({ goal }: { goal: PlanGoal }) => (
    <div className={`ak-card ak-cp-dlg__goal${goal.reached ? " ak-cp-dlg__goal--met" : ""}`}>
        <div className="ak-cp-dlg__goal-top">
            <span>{goal.title}</span>
            {goal.value && <span>{goal.value}</span>}
        </div>
        {goal.percent !== undefined && !goal.reached && <Progress className="ak-cp-dlg__bar" value={goal.percent} />}
        {(goal.reached || goal.detail) && (
            <p className="ak-cp-dlg__goal-sub">
                {goal.reached ? <b>Reached</b> : null}
                {goal.reached && goal.detail ? " · " : null}
                {goal.detail}
            </p>
        )}
    </div>
);

/** The readings a measuring step asked for, as the deck's thin line. Two or more, or nothing drawn. */
const StepLine = ({ readings }: { readings: PlanStep["readings"] }) => {
    if (readings.length < 2) return null;
    const values = readings.map((reading) => reading.value);
    const low = Math.min(...values);
    const span = Math.max(...values) - low || 1;
    const points = readings
        .map((reading, index) => `${2 + (index * 236) / (readings.length - 1)},${4 + ((Math.max(...values) - reading.value) * 46) / span}`)
        .join(" ");
    return (
        <svg className="ak-cp-dlg__spark" viewBox="0 0 240 54" preserveAspectRatio="none" role="img"
            aria-label={`Your readings: ${readings.map((reading) => reading.value).join(", ")}`}>
            <polyline points={points} />
        </svg>
    );
};

/**
 * Every care team the plan names, by name. Team membership is not an access decision, so nobody is
 * counted and nothing is said about who can see the plan. These are clinical FHIR CareTeams, never the
 * product's collaboration teams.
 */
const LinkedTeams = ({ card, read }: { card: PlanCard; read: PlanTeamsRead }) => {
    const ids = [...new Set(card.careTeamIds)];
    if (ids.length === 0 || (!read.answered && !read.failed)) return null;
    const label = ids.length === 1 ? "Care team" : "Care teams";
    if (read.failed) {
        return <div className="ak-cp-dlg__note">{label}: {ids.length === 1 ? "its name" : "their names"} could not be read just now</div>;
    }
    return (
        <div className="ak-cp-dlg__note">
            {label}:{" "}
            {ids.map((id, index) => {
                const team = read.teams.find((candidate) => candidate.id === id);
                const name = team?.name?.trim();
                return (
                    <span key={id}>
                        {index > 0 && ", "}
                        {name ? <b>{name}</b> : team ? "an unnamed team" : "a team we could not read"}
                    </span>
                );
            })}
        </div>
    );
};

const PlanBody = ({
    card, steps, teams, onOpenActivity, onOpenStep,
}: {
    card: PlanCard;
    steps: PlanStepsRead;
    teams: PlanTeamsRead;
    onOpenActivity: (card: PlanCard) => void;
    onOpenStep: (taskId: string) => void;
}) => {
    const working = card.goals.filter((goal) => !goal.reached);
    const reached = card.goals.filter((goal) => goal.reached);
    const owed = steps.answered && !steps.failed ? steps.stepsFor(card.id) : [];
    const nothingOn = steps.answered && !steps.failed && owed.length === 0
        && card.activities.length === 0 && card.goals.length === 0;

    return (
        <>
            <div className="ak-cp-dlg__head">
                <DialogTitle>{card.title}</DialogTitle>
                <DialogDescription className="sr-only">What this plan asks of you, and its goals.</DialogDescription>
            </div>
            <div className="ak-cp-dlg__meta">
                {card.organization && card.by && (
                    <span className="ak-org-line ak-cp__org">
                        <OrgBadge name={card.organization} />
                        <span className="ak-org-line__name">{card.organization}</span>
                    </span>
                )}
                {card.by && <span className="ak-card__description ak-cp__by">{card.by}</span>}
                {card.period && <span className="ak-cp-dlg__period">{card.period}</span>}
            </div>
            <LinkedTeams card={card} read={teams} />
            <div className="ak-cp-dlg__body">
                {(owed.length > 0 || card.activities.length > 0 || !steps.answered || steps.failed) && (
                    <div className="ak-caption ak-cp-dlg__gh">What you are doing</div>
                )}
                {!steps.answered && !steps.failed && (
                    <div className="ak-card ak-cp-dlg__act">
                        <span className="ak-cp-dlg__sp" aria-hidden="true" />
                        <span className="ak-cp-dlg__tx">
                            <Skeleton className="h-4 w-48" />
                            <Skeleton className="mt-2 h-3 w-24" />
                        </span>
                    </div>
                )}
                {steps.failed && (
                    <p className="ak-cp-dlg__empty" role="alert">
                        What this plan asks of you could not be loaded just now. Please try again.
                    </p>
                )}
                {owed.map((step) => (
                    <button key={step.id} type="button" className="ak-card ak-cp-dlg__act" onClick={() => onOpenStep(step.id)}>
                        <span className="ak-cp-dlg__sp" aria-hidden="true" />
                        <span className="ak-cp-dlg__tx">
                            <b>{step.title}</b>
                            <StepLine readings={step.readings} />
                            <span className="ak-cp-dlg__due">
                                {step.due.startsWith("Due by: ")
                                    ? <><b>Due by:</b> {step.due.slice("Due by: ".length)}</>
                                    : step.due}
                            </span>
                        </span>
                        <ChevronRight className="ak-cp-dlg__go" aria-hidden />
                    </button>
                ))}
                {card.activities.map((activity) => (
                    <button
                        key={activity.id}
                        type="button"
                        className={`ak-card ak-cp-dlg__act${activity.done ? " ak-cp-dlg__act--done" : ""}`}
                        onClick={() => onOpenActivity(card)}
                    >
                        <span className="ak-cp-dlg__sp" aria-hidden="true" />
                        <span className="ak-cp-dlg__tx">
                            <b>{activity.title}</b>
                            {activity.detail && <span className="ak-cp-dlg__ctx">{activity.detail}</span>}
                            {activity.due && (
                                <span className="ak-cp-dlg__due">
                                    <b>Due by:</b> {activity.due.replace(/^Due by\s*/, "")}
                                </span>
                            )}
                        </span>
                        <ChevronRight className="ak-cp-dlg__go" aria-hidden />
                    </button>
                ))}
                {working.length > 0 && (
                    <>
                        <div className="ak-caption ak-cp-dlg__gh">Goals</div>
                        {working.map((goal) => <GoalRow key={goal.id} goal={goal} />)}
                    </>
                )}
                {reached.length > 0 && (
                    <>
                        <div className="ak-caption ak-cp-dlg__gh">Reached</div>
                        {reached.map((goal) => <GoalRow key={goal.id} goal={goal} />)}
                    </>
                )}
                {nothingOn && (
                    <p className="ak-cp-dlg__empty">
                        This plan has no activities or goals yet. Your clinician adds them as you plan your care together.
                    </p>
                )}
            </div>
        </>
    );
};

const CarePlanDialog = ({
    planId,
    cards,
    loading,
    steps,
    teams,
    onClose,
    onOpenActivity,
    onOpenStep,
}: {
    planId?: string;
    cards: PlanCard[];
    loading: boolean;
    steps: PlanStepsRead;
    teams: PlanTeamsRead;
    onClose: () => void;
    onOpenActivity: (card: PlanCard) => void;
    onOpenStep: (taskId: string) => void;
}) => {
    const card = planId ? cards.find((candidate) => candidate.id === planId) : undefined;

    return (
        <Dialog open={Boolean(planId)} onOpenChange={(open) => { if (!open) onClose(); }}>
            <DialogContent className="ak-cp-dlg">
                <div key={planId} className="contents">
                    {card ? (
                        <PlanBody card={card} steps={steps} teams={teams} onOpenActivity={onOpenActivity} onOpenStep={onOpenStep} />
                    ) : (
                        <>
                            <div className="ak-cp-dlg__head">
                                <DialogTitle>{loading ? "A plan from your care team" : "We could not find that plan"}</DialogTitle>
                                <DialogDescription className="sr-only">One of your care plans.</DialogDescription>
                            </div>
                            {loading ? (
                                <div className="ak-cp-dlg__meta">
                                    <Skeleton className="h-4 w-48" />
                                    <Skeleton className="mt-2 h-4 w-32" />
                                </div>
                            ) : (
                                <p className="ak-cp-dlg__empty pb-4">
                                    It may have finished or been withdrawn. Your other plans are still on the list.
                                </p>
                            )}
                        </>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
};

export default CarePlanDialog;