import clsx from "clsx";
import type { License } from "@/lib/api";
import { formatDate, formatStamp, limitLabel } from "@/lib/format";

const REASON: Record<License["reason"], string> = {
    new: "New",
    renewal: "Renewal",
    tier_change: "Tier change",
    relink: "Relink",
    manual: "Manual",
};

/*
 * Licences are append-only: a renewal supersedes its predecessor rather than
 * replacing it. So this is a ledger, not a table. Superseded rows stay visible
 * and are overprinted the way a cancelled instrument is — hiding them would
 * destroy the only record of why an instance stopped working on a given date.
 */
export function Ledger({ licenses }: { licenses: License[] }) {
    if (licenses.length === 0) {
        return (
            <p className="text-ink-2">
                No licence has ever been issued for this instance, so it is read-only.
            </p>
        );
    }

    return (
        <ul className="grid">
            {licenses.map((l) => {
                const dead = Boolean(l.superseded_by);
                return (
                    <li
                        key={l.license_id}
                        className={clsx(
                            "grid gap-4 border-b border-rule-soft py-4 last:border-0 sm:grid-cols-[9.5rem_1fr]",
                            dead && "text-ink-3",
                        )}
                    >
                        <div className="font-mono text-[0.72rem] tabular-nums text-ink-3">
                            <b
                                className={clsx(
                                    "block text-[0.82rem] font-semibold",
                                    dead ? "text-ink-3" : "text-ink",
                                )}
                            >
                                {formatDate(l.issued_at)}
                            </b>
                            {formatStamp(l.issued_at)}
                        </div>
                        <div className="grid justify-items-start gap-1.5">
                            {dead && (
                                <span className="-rotate-2 rounded-sm border-2 border-archival px-1.5 py-0.5 font-mono text-[0.72rem] uppercase tracking-[0.18em] text-archival opacity-75">
                                    Superseded
                                </span>
                            )}
                            <p className="flex flex-wrap items-center gap-2 font-semibold">
                                {l.tier.replace("_", " ")}
                                <span className="rounded-sm border border-rule px-1.5 py-0.5 font-mono text-[0.72rem] font-normal uppercase tracking-[0.09em] text-accent">
                                    {REASON[l.reason]}
                                </span>
                            </p>
                            <p className="font-mono text-[0.72rem] tabular-nums text-ink-3">
                                {l.license_id.slice(0, 8)} · expires {formatDate(l.expires_at)} ·{" "}
                                {limitLabel(l.limits.max_servers)} servers · issued by {l.issued_by}
                                {l.superseded_by && (
                                    <>
                                        {" "}
                                        · replaced by{" "}
                                        <span className="text-accent underline">
                                            {l.superseded_by.slice(0, 8)}
                                        </span>
                                    </>
                                )}
                            </p>
                        </div>
                    </li>
                );
            })}
        </ul>
    );
}