import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Check } from 'lucide-react';
import { formatMoney } from '../../utils/money';
import type { SubscriptionRow, SubscriptionRowKey } from './subscriptionRows';

// One row of the settled subscription page ( §4).
//
// EVERY ROW SHOWS WHAT YOU HAVE **AND** IS THE CONTROL FOR CHANGING IT. There is no second screen and
// no mode switch - that is decision 1, and it is what makes a missing capability noticeable: a row an
// admin sees every month with no way to switch it on gets reported, and a row that was never rendered
// does not.

interface Props {
    row: SubscriptionRow;
    draftQuantity: number;
    changed: boolean;
    onChange: (key: SubscriptionRowKey, quantity: number) => void;
}

const priceLine = (row: SubscriptionRow): string => {
    const per = row.unit === 'block' ? 'per block' : row.unit === 'clinician' ? 'per clinician' : '';
    return `${formatMoney(row.unitPriceCents)}/mo${per ? ` ${per}` : ''}`;
};

const Meter: React.FC<{ used: number; limit: number; label: string; atLimit: boolean; unit?: string }> = ({ used, limit, label, atLimit, unit }) => (
    // The meter rides INLINE with the description (decision 5) rather than sitting in a section of its
    // own. On telehealth it is doing the conversion work and is a first-class element, not a footnote.
    <div className="mt-2 max-w-xs">
        <div className="mb-1 flex items-baseline justify-between gap-2">
            <span className="text-xs text-muted-foreground">{label}</span>
            <span className={`text-xs font-medium ${atLimit ? 'text-destructive' : 'text-muted-foreground'}`}>
                {used} / {limit}{unit ? ` ${unit}` : ''}
            </span>
        </div>
        <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
            <div
                className={`h-full rounded-full ${atLimit ? 'bg-destructive' : 'bg-primary'}`}
                style={{ width: `${Math.min(100, Math.round((used / limit) * 100))}%` }}
            />
        </div>
    </div>
);

export const SubscriptionRowItem: React.FC<Props> = ({ row, draftQuantity, changed, onChange }) => {
    const enabled = draftQuantity > 0;

    return (
        <div
            // Decision 7 - a changed row is tinted with a LEFT RAIL and tagged, so what is about to be
            // bought is visible in place rather than only in the bar at the bottom.
            className={`flex flex-col gap-3 border-l-4 border-t-border px-[14px] py-3 sm:flex-row sm:items-start sm:justify-between ${
                changed ? 'border-l-primary bg-accent/40' : 'border-l-transparent'
            }`}
            data-row={row.key}
            data-changed={changed ? 'true' : 'false'}
        >
            <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                    <span className="text-[14px] font-semibold tracking-normal text-ink-strong">{row.name}</span>
                    {changed && (
                        <span className="rounded bg-primary px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-primary-foreground">
                            Changed
                        </span>
                    )}
                </div>

                <p className="mt-0.5 text-sm text-muted-foreground">{row.description}</p>
                {row.fairUse && <p className="mt-1 text-xs italic text-muted-foreground">{row.fairUse}</p>}

                {row.includedNote && (
                    <p className="mt-1 text-sm text-muted-foreground">{row.includedNote}</p>
                )}

                {/* Decision 10 — stated on BOTH rows, quietly, never as an error: nothing is wrong. A
                    dependency stated on one side is invisible to whoever reads the other. */}
                {row.dependencyNote && (
                    <p className="mt-1 text-sm text-muted-foreground">{row.dependencyNote}</p>
                )}

                {/* Decision 9 — the one-time cost is declared BEFORE the toggle, in the attention colour.
                    ⛔ Finding it at checkout reads as a bait.

                    AND IT SAYS WHEN: the server bills it on its own invoice when SMS first turns on, once
                    per carrier registration, never on the monthly bill. */}
                {/* A SPAN, BECAUSE A PARAGRAPH CANNOT BE AMBER HERE. index.css normalises colour on
                    the root and on p, li, label, input, select, textarea and button at a specificity
                    the utility layer cannot beat, and later in the file - so this line rendered as
                    ordinary body copy. The weight applied and the colour did not, on one of the two
                    sentences about money on this screen. A span is not on that list. */}
                {row.oneTimeCents !== undefined && !row.enabled && (
                    <span className="mt-1 block text-sm font-medium text-warning dark:text-amber-500">
                        A one-time {formatMoney(row.oneTimeCents)} carrier registration is charged
                        on its own invoice when SMS is turned on, unless your current registration is already paid for.
                    </span>
                )}

                {/* A line that bills every month while the capability behind it is inert says so
                    HERE, on the row, in the same attention colour as the one-time charge above. It is
                    not an error and it is not the practice's mistake, so it is a statement rather than
                    an alert - but it is about money already being spent, so it is not a muted note
                    either. */}
                {/* The same rule as the line above, and the same fix: a paragraph here loses its
                    colour to the stylesheet's element normalisation. This one says a line is BILLING
                    every month while the capability behind it is inert, which is the last sentence on
                    the screen that should be drawn as ordinary text. */}
                {row.notReadyNote && (
                    <span className="mt-1 block text-sm font-medium text-warning dark:text-amber-500">
                        {row.notReadyNote}
                    </span>
                )}

                {/* MUTED, NOT THE ATTENTION COLOUR. Nothing is wrong and nobody's money is at stake -
                    it is a capability that is not on sale yet, and colouring it like a warning would
                    read as the practice having done something or as the feature being broken. */}
                {/* A SPAN, AND THAT IS NOT A STYLE PREFERENCE. index.css normalises colour on the
                    root and on p / li / label / input / select / textarea / button at (1,0,1), later in
                    the file than the utility layer - so a `text-...` class on a <p> here is INERT and
                    this note would have rendered as ordinary body copy. The file says so about itself:
                    "a text- UTILITY still loses to this rule on those eight elements". A span is not on
                    that list, so the muted colour actually lands, and it costs no `!` override. */}
                {row.unavailableReason && (
                    <span className="mt-1 block text-sm text-muted-foreground">{row.unavailableReason}</span>
                )}

                {row.meter && <Meter {...row.meter} />}
            </div>

            <div className="flex shrink-0 items-center gap-4 sm:pl-4">
                <div className="text-right">
                    <div className="text-[13px] font-semibold tracking-normal text-ink-strong">{priceLine(row)}</div>
                    {row.unit === 'clinician' && row.unitMultiplier > 1 && enabled && (
                        <div className="text-xs text-muted-foreground">
                            {formatMoney(row.unitPriceCents * row.unitMultiplier)}/mo for {row.unitMultiplier}
                        </div>
                    )}
                </div>

                {row.kind === 'report' ? (
                    // REPORTS, NEVER CONTROLS (decision 4). Seats follow the clinicians enabled in
                    // Staff; editing them in two places is how the count drifts from what it bills.
                    <Link
                        to={row.manageAt ?? '#'}
                        className="btn btn-blue-ghost-sm inline-flex items-center gap-1"
                    >
                        Manage in Staff <ArrowRight size={14} />
                    </Link>
                ) : row.kind === 'stepper' ? (
                    <div className="flex items-center gap-2">
                        <button
                            type="button"
                            className="btn btn-blue-ghost"
                            aria-label={`Remove one ${row.name} block`}
                            disabled={draftQuantity <= 0}
                            onClick={() => onChange(row.key, Math.max(0, draftQuantity - 1))}
                        >
                            −
                        </button>
                        <span className="w-8 text-center font-semibold tabular-nums">{draftQuantity}</span>
                        <button
                            type="button"
                            className="btn btn-blue-ghost"
                            aria-label={`Add one ${row.name} block`}
                            onClick={() => onChange(row.key, draftQuantity + 1)}
                        >
                            +
                        </button>
                    </div>
                ) : (
                    <button
                        type="button"
                        role="switch"
                        aria-checked={enabled}
                        aria-label={row.name}
                        // Decision 7 - this changes a DRAFT and charges nothing. A control that bills on
                        // click is the opposite of this design.
                        onClick={() => onChange(row.key, enabled ? 0 : 1)}
                        // AND IT IS NOT OFFERED AT ALL while the capability is switched off across the
                        // platform. The note beside it explains; a live control over that sentence would
                        // be a screen contradicting itself, and pressing it starts a real monthly charge
                        // for something nobody can use. `disabled` rather than hidden: a row that
                        // vanishes cannot say why it is gone, and the price stays visible so the
                        // practice can still see what it will cost when it opens.
                        disabled={Boolean(row.unavailableReason)}
                        title={row.unavailableReason}
                        // Width, not min-width. The On state has an icon, which makes it match the
                        // icon-only tap-target rule in index.css, and that rule's min-width:24px beats
                        // a utility class - so On rendered 62px against Off's 88px. A toggle that
                        // resizes when you press it also drags the price beside it out of line.
                        className={`inline-flex h-[30px] w-[5.5rem] items-center justify-center gap-1.5 ${
                            enabled
                                ? 'btn btn-blue'
                                : 'btn btn-blue-ghost'
                        } ${row.unavailableReason ? 'cursor-not-allowed opacity-[.45]' : ''}`}
                    >
                        {enabled ? <><Check size={14} /> On</> : 'Off'}
                    </button>
                )}
            </div>
        </div>
    );
};

export default SubscriptionRowItem;