/* Foundations tab — spacing, radii, shadows, borders, motion & interaction, iconography */

/* Live hover/press demo button — elevation via shadow, press via 1px translateY */
const MotionDemoButton = ({ label, background, color = "#FFFFFF" }) => {
  const [hover, setHover] = React.useState(false);
  const [pressed, setPressed] = React.useState(false);
  return (
    <button
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg"
      style={{
        background,
        color,
        fontSize: 14,
        fontWeight: 600,
        boxShadow: hover ? SHADOWS.md : SHADOWS.sm,
        transform: pressed ? "translateY(1px)" : "none",
        transition: "box-shadow 150ms ease, transform 50ms ease",
      }}
    >
      {label}
    </button>
  );
};

/* Live hover demo card — lifts via shadow only, never a colored ring or border change */
const MotionDemoCard = () => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="rounded-lg p-4"
      style={{
        background: BRAND.surface.card,
        border: `1px solid ${BRAND.surface.border}`,
        boxShadow: hover ? SHADOWS.md : "none",
        transition: "box-shadow 150ms ease",
      }}
    >
      <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>Hover this card</div>
      <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.5, marginTop: 6 }}>
        Lift via shadow only. The border never changes color and no ring appears.
      </p>
    </div>
  );
};

const FoundationsTab = () => {
  const spaceEntries = Object.entries(SPACE).sort((a, b) => Number(a[0]) - Number(b[0]));

  const radii = [
    { key: "sm", px: RADII.sm, role: "Small chips, table corners" },
    { key: "md", px: RADII.md, role: "Cards, inputs, buttons" },
    { key: "lg", px: RADII.lg, role: "Hero blocks, callouts" },
    { key: "xl", px: RADII.xl, role: "Feature surfaces, cover blocks" },
    { key: "pill", px: RADII.pill, role: "Pill badges, avatar circles" },
  ];

  const borderRules = [
    { t: "One hairline.", b: "1px in surface border #E5E7EB on everything that needs a border. No double borders." },
    { t: "Dashed means boundary.", b: "Dashed strokes appear only inside diagrams, where dashed is the convention for a boundary." },
    { t: "Color belongs to callouts.", b: "No colored borders anywhere except the 4px primary left bar on callouts." },
  ];

  const motionRules = [
    { t: "150ms ease.", b: "Every UI transition uses 150 milliseconds with an ease curve. Nothing slower, nothing bouncy." },
    { t: "Buttons elevate, never recolor.", b: "Hover raises the shadow to the md token. The fill color does not shift." },
    { t: "Press is one pixel.", b: "Active state is a 1px translateY downward. No color change. Quiet." },
    { t: "Links darken.", b: "Text controls darken to primary 700 on hover instead of lifting." },
    { t: "Cards lift via shadow only.", b: "Never a colored ring, glow, or border-color change on hover." },
    { t: "Nothing animates the grid.", b: "No bounces, no springs, no parallax. Deck transitions are hard cuts." },
  ];

  const iconSizes = [
    { px: 14, role: "Inline chip" },
    { px: 16, role: "Button" },
    { px: 20, role: "Nav" },
    { px: 24, role: "Feature" },
    { px: 32, role: "Hero" },
  ];

  const iconRules = [
    { t: "Lucide is the official set.", b: "Neutral-technical stroke icons on a 24px grid. No proprietary sprite, no mixed icon sets on one surface." },
    { t: "Stroke 1.5px, never mixed.", b: "1.5px is the default stroke weight. Never mix stroke weights on the same surface." },
    { t: "Snap sizes to 4px.", b: "14px inline chips, 16px buttons, 20px nav, 24px feature rows, 32px hero moments." },
    { t: "Color inherits.", b: "Icons take the surrounding text color. Primary 500 is reserved for active or highlighted icons." },
  ];

  return (
    <div className="space-y-12">
      {/* Spacing */}
      <section>
        <SectionEyebrow number="19" label="Spacing" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          A 4px base scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64. Card padding steps are 16, 20, 24, and 32px depending on density.
        </p>
        <Card>
          <div className="flex items-end gap-4 flex-wrap">
            {spaceEntries.map(([k, px]) => (
              <div key={k} className="flex flex-col items-center gap-2">
                <div style={{ width: px, height: px, background: BRAND.primary[500], borderRadius: 2 }} />
                <div className="font-mono text-center" style={{ fontSize: 10, color: BRAND.ink.subtle, lineHeight: 1.5 }}>
                  --space-{k}
                  <br />
                  {px}px
                </div>
              </div>
            ))}
          </div>
        </Card>
      </section>

      {/* Radii */}
      <section>
        <SectionEyebrow number="20" label="Radii" />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
          {radii.map((r) => (
            <Card key={r.key} padding={16}>
              <div
                className="w-full"
                style={{
                  height: 64,
                  background: BRAND.primary[50],
                  border: `1px solid ${BRAND.primary[200]}`,
                  borderRadius: r.px,
                }}
              />
              <div className="font-mono mt-3" style={{ fontSize: 12, fontWeight: 700, color: BRAND.primary[700] }}>
                --radius-{r.key} · {r.px === 9999 ? "9999px" : `${r.px}px`}
              </div>
              <p style={{ fontSize: 12, color: BRAND.ink.muted, lineHeight: 1.5, marginTop: 4 }}>{r.role}</p>
            </Card>
          ))}
        </div>
        <div className="mt-4 rounded-xl p-5" style={{ background: BRAND.surface.callout, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
          <div style={{ fontSize: 14, color: BRAND.ink.body, lineHeight: 1.6 }}>
            <strong style={{ color: BRAND.primary[700] }}>Design rule.</strong> Never mismatched radii on the same surface — one radius per density tier.
          </div>
        </div>
      </section>

      {/* Shadows */}
      <section>
        <SectionEyebrow number="21" label="Shadows" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          A minimal elevation system. No heavy elevation, no 0 20px 60px drop shadows, no inset shadows.
        </p>
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { label: "shadow-sm", css: SHADOWS.sm, role: "Resting cards, primary buttons" },
            { label: "shadow-md", css: SHADOWS.md, role: "Hover elevation" },
          ].map((s) => (
            <Card key={s.label} padding={0} style={{ overflow: "hidden" }}>
              <div className="flex items-center justify-center" style={{ background: BRAND.surface.canvas, height: 160 }}>
                <div className="rounded-lg" style={{ width: 160, height: 80, background: BRAND.surface.card, border: `1px solid ${BRAND.surface.border}`, boxShadow: s.css }} />
              </div>
              <div className="px-5 py-4" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
                <div className="font-mono" style={{ fontSize: 12, fontWeight: 700, color: BRAND.primary[700] }}>--{s.label}</div>
                <div className="font-mono mt-1" style={{ fontSize: 11, color: BRAND.ink.subtle }}>{s.css}</div>
                <p style={{ fontSize: 12.5, color: BRAND.ink.muted, marginTop: 6 }}>{s.role}</p>
              </div>
            </Card>
          ))}
          <Card padding={0} style={{ overflow: "hidden", border: `1px solid ${BRAND.dark.navyAccent}` }}>
            <div className="flex items-center justify-center" style={{ background: BRAND.dark.navy, height: 160 }}>
              <button className="px-5 py-2.5 rounded-lg" style={{ background: BRAND.primary[500], color: "#FFFFFF", fontSize: 14, fontWeight: 600, boxShadow: SHADOWS.glowPrimary, border: "none" }}>
                Hero CTA
              </button>
            </div>
            <div className="px-5 py-4" style={{ background: BRAND.dark.navyDeep, borderTop: `1px solid ${BRAND.dark.navyAccent}` }}>
              <div className="font-mono" style={{ fontSize: 12, fontWeight: 700, color: BRAND.primary[300] }}>--shadow-glow-primary</div>
              <div className="font-mono mt-1" style={{ fontSize: 11, color: BRAND.dark.slateMuted }}>{SHADOWS.glowPrimary}</div>
              <p style={{ fontSize: 12.5, color: BRAND.dark.slateMuted, marginTop: 6 }}>Hero CTAs only.</p>
            </div>
          </Card>
        </div>
      </section>

      {/* Borders */}
      <section>
        <SectionEyebrow number="22" label="Borders" />
        <div className="grid md:grid-cols-3 gap-4">
          <Card>
            <div className="rounded-lg p-4" style={{ background: BRAND.surface.card, border: `1px solid ${BRAND.surface.border}` }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: BRAND.ink.body }}>Default hairline</div>
              <p className="font-mono" style={{ fontSize: 11, color: BRAND.ink.subtle, marginTop: 4 }}>1px solid #E5E7EB</p>
            </div>
            <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 12 }}>
              The only border most surfaces ever need.
            </p>
          </Card>
          <Card>
            <div className="rounded-lg p-4" style={{ background: BRAND.surface.callout, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: BRAND.ink.body }}>Callout left bar</div>
              <p className="font-mono" style={{ fontSize: 11, color: BRAND.ink.subtle, marginTop: 4 }}>4px solid primary-500</p>
            </div>
            <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 12 }}>
              The single sanctioned colored border.
            </p>
          </Card>
          <Card>
            <div className="rounded-lg p-4" style={{ background: BRAND.surface.card, border: `1.5px dashed ${BRAND.ink.light}` }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: BRAND.ink.body }}>Diagram boundary</div>
              <p className="font-mono" style={{ fontSize: 11, color: BRAND.ink.subtle, marginTop: 4 }}>dashed · diagrams only</p>
            </div>
            <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 12 }}>
              Dashed is the convention for “boundary” inside diagrams.
            </p>
          </Card>
        </div>
        <div className="grid md:grid-cols-3 gap-3 mt-4">
          {borderRules.map((rule, i) => (
            <Card key={rule.t} padding={18}>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, color: BRAND.primary[500], letterSpacing: "0.16em" }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body, marginTop: 8 }}>{rule.t}</div>
              <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 4 }}>{rule.b}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* Motion & interaction */}
      <section>
        <SectionEyebrow number="23" label="Motion & Interaction" />
        <div className="grid lg:grid-cols-[1fr_0.9fr] gap-4">
          <Card>
            <ol className="space-y-5">
              {motionRules.map((item, i) => (
                <li key={item.t} className="flex items-start gap-4">
                  <span className="font-mono shrink-0" style={{ fontSize: 22, fontWeight: 700, color: BRAND.primary[500], letterSpacing: "-0.02em", lineHeight: 1, paddingTop: 2, minWidth: 36 }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: BRAND.ink.body }}>{item.t}</div>
                    <p style={{ fontSize: 13.5, color: BRAND.ink.muted, lineHeight: 1.6, marginTop: 4 }}>{item.b}</p>
                  </div>
                </li>
              ))}
            </ol>
          </Card>
          <Card style={{ background: BRAND.surface.canvas }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500], marginBottom: 14 }}>
              LIVE DEMO
            </div>
            <div className="flex flex-wrap items-center gap-3">
              <MotionDemoButton label="Hover, then press" background={BRAND.primary[500]} />
              <MotionDemoButton label="Secondary" background={BRAND.secondary[600]} />
            </div>
            <div className="mt-4">
              <MotionDemoCard />
            </div>
            <p style={{ fontSize: 12.5, color: BRAND.ink.subtle, lineHeight: 1.55, marginTop: 14 }}>
              Hover elevates to shadow-md in 150ms. Pressing moves the button down one pixel. No color shifts anywhere.
            </p>
          </Card>
        </div>
      </section>

      {/* Iconography */}
      <section>
        <SectionEyebrow number="24" label="Iconography" />
        <Card>
          <div className="flex items-end gap-8 flex-wrap">
            {iconSizes.map((s) => (
              <div key={s.px} className="flex flex-col items-center gap-2" style={{ color: BRAND.ink.body }}>
                <Layers size={s.px} strokeWidth={1.5} />
                <div className="font-mono text-center" style={{ fontSize: 10, color: BRAND.ink.subtle, lineHeight: 1.5 }}>
                  {s.px}px
                  <br />
                  {s.role}
                </div>
              </div>
            ))}
            <div className="flex flex-col items-center gap-2" style={{ color: BRAND.primary[500] }}>
              <Layers size={24} strokeWidth={1.5} />
              <div className="font-mono text-center" style={{ fontSize: 10, color: BRAND.primary[500], lineHeight: 1.5 }}>
                24px
                <br />
                active
              </div>
            </div>
          </div>
        </Card>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3 mt-4">
          {iconRules.map((rule, i) => (
            <Card key={rule.t} padding={18}>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, color: BRAND.primary[500], letterSpacing: "0.16em" }}>
                {String(i + 1).padStart(2, "0")}
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body, marginTop: 8 }}>{rule.t}</div>
              <p style={{ fontSize: 12.5, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 4 }}>{rule.b}</p>
            </Card>
          ))}
        </div>
        <div className="mt-4 rounded-xl p-5" style={{ background: BRAND.surface.callout, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
          <div style={{ fontSize: 14, color: BRAND.ink.body, lineHeight: 1.6 }}>
            <strong style={{ color: BRAND.primary[700] }}>The rule.</strong> Emoji: never. No exceptions. Unicode symbols stop at the middot (·) and the multiplier (×); everything else is a drawn icon.
          </div>
        </div>
      </section>
    </div>
  );
};

window.FoundationsTab = FoundationsTab;