import React from 'react';
import { ClipboardList, User } from 'lucide-react';
import { Progress } from '../../../../components/ui/progress';
import type { GoalRow, GoalSource } from '../../../../utils/goalRow';

// One goal, as the drawing states it: what it is, where the number stands, a derived bar, the line that
// says what moves it, and where it came from.
//
// PRESENTATIONAL, and that is deliberate rather than tidiness. It takes the finished sentences and calls
// no service, so a test can render a reached goal, a goal that has not moved and a goal whose numbers
// cannot make a bar, and assert directly which of them draws a bar at all.

interface Props {
    row: GoalRow;
    source?: GoalSource;
    /** The opened goal draws its readings in place of the bar; the list keeps the bar. */
    chart?: React.ReactNode;
    /** The staff chart draws the goal as its deck does: title, the numbers, a short bar, who set it. */
    layout?: "staff";
}

// The deck's provenance tag in the shared pill tones: the patient's own sage, this practice's blue, the rest muted.
const WHO_TONE: Record<NonNullable<GoalSource['kind']>, string> = { self: ' ak-pill--ok', here: ' ak-pill--info', elsewhere: '' };

const StaffGoalRow = ({ row, source }: Props) => (
    <div className="ak-gl-row ak-gl-row--staff">
        <span className="ak-card__title ak-gl-row__title">{row.title}</span>
        {(row.numbers || row.summary) && <p className="ak-card__meta ak-gl-row__sub">{row.numbers || row.summary}</p>}
        {row.progress && (
            <div
                className="ak-progress ak-gl-row__bar"
                role="progressbar"
                aria-label={`${row.title} progress`}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-valuenow={Math.round(row.progress.fraction * 100)}
            >
                <span
                    className="ak-progress__fill"
                    style={{ '--ak-progress-value': `${Math.round(row.progress.fraction * 100)}%` } as React.CSSProperties}
                />
            </div>
        )}
        {source && <span className={`ak-pill ak-gl-row__who${WHO_TONE[source.kind ?? 'elsewhere']}`} data-kind={source.kind}>{source.label}</span>}
    </div>
);

export const GoalRowCard: React.FC<Props> = ({ row, source, chart, layout }) => layout === "staff" && chart === undefined ? (
    <StaffGoalRow row={row} source={source} />
) : (
    <div className="ak-gl-row w-full space-y-1.5 text-left">
        <div className="ak-gl-row__top flex items-baseline gap-2">
            <span className="ak-card__title ak-card__title--lead ak-gl-row__title flex-1 min-w-0">{row.title}</span>
            {/* Tabular figures, because a column of readings that jitters as the digits change is
                harder to compare than one that does not. */}
            {row.currentLabel && (
                <span className="ak-card__title ak-gl-row__now tabular-nums">
                    {row.currentLabel}
                </span>
            )}
        </div>

        {/* NO BAR WHEN THERE IS NOTHING TO DRAW ONE FROM. A goal with no direction or no target has no
            fraction, and a bar sitting at zero would say the patient has made no progress rather than
            that the goal cannot say. */}
        {chart !== undefined ? chart : row.progress && (
            <Progress
                value={Math.round(row.progress.fraction * 100)}
                aria-label={`${row.title} progress`}
                className={`ak-gl-row__bar h-1.5 ${row.reached ? 'ak-gl-row__bar--done [&_[data-slot=progress-indicator]]:bg-[var(--success)]' : ''}`}
            />
        )}

        {row.summary && (
            <p className="ak-card__description ak-gl-row__sub">{row.summary}</p>
        )}

        {source && (
            <p className="ak-card__meta ak-gl-row__src">
                {source.selfSet
                    ? <User className="w-3 h-3 flex-none" aria-hidden="true" />
                    : <ClipboardList className="w-3 h-3 flex-none" aria-hidden="true" />}
                {source.label}
            </p>
        )}
    </div>
);

export default GoalRowCard;