import type { ReactNode } from "react";
import type { Tier } from "../api/types";
import { tiers } from "../logic/format";
import { tierLook } from "./charts/tiers";
import { Panel, StatusPill } from "./kit";
import Shell from "./Shell";

const Steps = ({ children }: { children: ReactNode }) => (
  <ol className="m-0 flex list-none flex-col gap-3 p-0 text-[13.5px] leading-5 text-body [counter-reset:step]">{children}</ol>
);
const Step = ({ children }: { children: ReactNode }) => (
  <li className="flex gap-3 [counter-increment:step] before:flex before:size-6 before:shrink-0 before:items-center before:justify-center before:rounded-full before:bg-quiet before:font-mono before:text-[11.5px] before:font-medium before:text-muted before:content-[counter(step)]">
    <span className="min-w-0 pt-0.5">{children}</span>
  </li>
);

/** CHK-6 tiers with their times, and the limits Context states plainly (principle 7). */
export default function HowItWorks() {
  return (
    <Shell crumbs={[{ label: "How it works" }]} active="how">
      <div className="mx-auto flex w-full max-w-[760px] flex-col gap-5 pt-2 pb-12 md:pt-6">
        <header className="flex min-w-0 flex-col gap-1">
          <h1 className="m-0 text-[26px] leading-8 font-semibold tracking-[-0.02em] text-ink md:text-[30px] md:leading-9">How it works</h1>
          <p className="m-0 text-[14px] leading-[21px] text-muted">Context shows information and where it came from. A clinician decides. It is not for emergencies.</p>
        </header>
        <Panel title="Tiers" icon="flag-line" iconClass="text-amber-icon">
          <ul className="m-0 flex list-none flex-col p-0">
            {(Object.keys(tiers) as Tier[]).map((k) => (
              <li key={k} className="flex flex-wrap items-center gap-x-4 gap-y-1.5 py-2.5 shadow-[inset_0_-1px_0_var(--color-hairline)] last:shadow-none">
                <span className="w-[150px] shrink-0">
                  <StatusPill tone={tierLook[k].tone} icon={tierLook[k].icon} size="sm">
                    {tiers[k].label}
                  </StatusPill>
                </span>
                <span className="text-[13.5px] leading-5 text-body">
                  {tiers[k].when}. <span className="text-muted">A time for your review, not an instruction.</span>
                </span>
              </li>
            ))}
          </ul>
        </Panel>
        <Panel title="The check" icon="file-search-line" iconClass="text-blue-icon">
          <Steps>
            <Step>Every fact comes from a record line, the patient's app or a moment in a call, and links back to it.</Step>
            <Step>Nothing goes into the check until you include it.</Step>
            <Step>The check runs twice: the medicine list alone, then with what you confirmed. The result says what the patient's details added.</Step>
            <Step>
              No findings never means the prescription is safe. Every result ends with what was not checked: products with no rules, facts not confirmed, rules waiting for
              review, and check-in answers, which no rule reads.
            </Step>
          </Steps>
        </Panel>
        <Panel title="Yasmar check-ins" icon="chat-voice-line" iconClass="text-purple-icon">
          <Steps>
            <Step>Yasmar calls through the patient's MARMAR Health app, for adults who allowed it, with their date of birth on file.</Step>
            <Step>She says she is a computer assistant, checks the patient's name and date of birth, and asks for consent before anything clinical.</Step>
            <Step>She asks your questions one at a time, gives no advice, and records each answer as a note linked to the call text.</Step>
            <Step>On a red flag she gives the emergency line and alerts you at once. For an Urgent review finding, call the patient first.</Step>
            <Step>Notes enter a check only when you add them, and never remove a recorded fact.</Step>
          </Steps>
        </Panel>
      </div>
    </Shell>
  );
}