// Miniatures: a tiny CSS-drawn likeness of what each section actually renders,
// so the floorplan board is legible as a shape before you read a label — four
// dots for Workers, a stubbed progress bar for Active jobs, a meter with a
// threshold notch for Disk. Purely decorative (aria-hidden); the section's real
// name is always next to it.

import type { SectionId } from "../../lib/sections";

const FRAME =
  "flex h-5 w-8 shrink-0 flex-col justify-center gap-[2px] overflow-hidden rounded-sm border border-border/60 bg-background px-[3px]";

// A row of text, as the widget's strips mostly are: a rule of some width.
function Rule({ w, tone = "bg-muted-foreground/40" }: { w: string; tone?: string }) {
  return <span className={`block h-[3px] rounded-full ${tone}`} style={{ width: w }} />;
}

function Dot({ tone }: { tone: string }) {
  return <span className={`block h-[4px] w-[4px] rounded-full ${tone}`} />;
}

// A list row: a label rule with a small chip pushed to the right, the shape the
// Needs work / Needs cleaning strips repeat.
function ListRow({ chip }: { chip: string }) {
  return (
    <span className="flex items-center justify-between gap-[2px]">
      <Rule w="60%" />
      <span className={`block h-[4px] w-[6px] rounded-[1px] ${chip}`} />
    </span>
  );
}

const MINIS: Record<SectionId, () => React.ReactElement> = {
  // Two buttons side by side.
  controls: () => (
    <span className="flex items-center gap-[2px]">
      <span className="block h-[7px] w-[11px] rounded-[2px] bg-primary/70" />
      <span className="block h-[7px] w-[8px] rounded-[2px] bg-muted-foreground/30" />
    </span>
  ),
  // Two readout lines, the second shorter.
  lastSync: () => (
    <>
      <Rule w="100%" />
      <Rule w="65%" />
    </>
  ),
  // Status dot plus a line.
  scheduler: () => (
    <span className="flex items-center gap-[3px]">
      <Dot tone="bg-success" />
      <Rule w="70%" />
    </span>
  ),
  // A meter with the low-disk threshold notched into it.
  disk: () => (
    <span className="relative block h-[6px] w-full overflow-hidden rounded-[2px] bg-muted">
      <span className="absolute inset-y-0 left-0 w-[62%] bg-success/70" />
      <span className="absolute inset-y-0 left-[78%] w-[1.5px] bg-destructive" />
    </span>
  ),
  // One number, warning-tinted.
  cleanable: () => (
    <span className="flex items-center gap-[3px]">
      <Dot tone="bg-warning" />
      <Rule w="55%" tone="bg-warning/50" />
    </span>
  ),
  // Stacked channel rows with reclaim chips.
  cleanChannels: () => (
    <>
      <ListRow chip="bg-warning/60" />
      <ListRow chip="bg-warning/60" />
    </>
  ),
  // Four worker dots, one idle.
  workers: () => (
    <span className="flex items-center gap-[3px]">
      <Dot tone="bg-success" />
      <Dot tone="bg-success" />
      <Dot tone="bg-success" />
      <Dot tone="bg-muted-foreground/40" />
    </span>
  ),
  // A job heading over a part-filled progress bar.
  jobs: () => (
    <>
      <Rule w="55%" />
      <span className="relative block h-[4px] w-full overflow-hidden rounded-[2px] bg-muted">
        <span className="absolute inset-y-0 left-0 w-[45%] bg-success" />
      </span>
    </>
  ),
  // Stacked channel rows with backlog chips.
  actionable: () => (
    <>
      <ListRow chip="bg-info/60" />
      <ListRow chip="bg-info/60" />
    </>
  ),
  // A dot plus two rules of different lengths — the strip's shape, and a
  // deliberate likeness of its content: two numbers that are NOT the same size
  // and are never added together.
  backfill: () => (
    <span className="flex items-center gap-[3px]">
      <Dot tone="bg-warning" />
      <span className="flex min-w-0 flex-1 flex-col gap-[2px]">
        <Rule w="45%" tone="bg-warning/60" />
        <Rule w="85%" />
      </span>
    </span>
  ),
};

export function SectionMini({ id }: { id: SectionId }) {
  const Draw = MINIS[id];
  return (
    <span aria-hidden className={FRAME}>
      <Draw />
    </span>
  );
}