// Shared form & layout primitives for the ROKKOR app UI kit.
// Mirrors the real desktop app's settings/cards styling. window.RokkorKit
(function () {
  const { Button, Switch, Badge } = window.ROKKORDesignSystem_4e99ef;

  // Titled card with optional icon + description + header action.
  function Section({ icon: Ic, title, desc, action, children, style = {} }) {
    return (
      <div style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-card)", padding: "24px 26px", ...style }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
              {Ic ? <span style={{ color: "var(--ink-700, var(--ink-800))" }}><Ic size={19} /></span> : null}
              <h3 style={{ font: "600 19px/1.2 var(--font-sans)", color: "var(--ink-900)", margin: 0 }}>{title}</h3>
            </div>
            {desc ? <p style={{ font: "400 14px/1.5 var(--font-sans)", color: "var(--ink-500)", margin: "6px 0 0" }}>{desc}</p> : null}
          </div>
          {action ? <div style={{ flex: "none" }}>{action}</div> : null}
        </div>
        {children ? <div style={{ marginTop: 20 }}>{children}</div> : null}
      </div>
    );
  }

  // Inset sub-card (used inside Section, e.g. Welcome setup / device list).
  function Inset({ children, style = {} }) {
    return <div style={{ background: "var(--paper-50)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "16px 18px", ...style }}>{children}</div>;
  }

  // Toggle row: label + hint on the left, Switch on the right.
  function ToggleRow({ label, hint, checked, onChange, divider = false }) {
    return (
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 20, padding: "14px 0", borderTop: divider ? "1px solid var(--border)" : "none" }}>
        <div style={{ maxWidth: "78%" }}>
          <div style={{ font: "600 14px/1.35 var(--font-sans)", color: "var(--ink-900)" }}>{label}</div>
          {hint ? <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 4 }}>{hint}</div> : null}
        </div>
        <div style={{ flex: "none", marginTop: 2 }}><Switch checked={checked} onCheckedChange={onChange} /></div>
      </div>
    );
  }

  // Native select styled to the cream "field" look.
  function Select({ label, hint, value, onChange, options = [], style = {} }) {
    return (
      <div style={{ ...style }}>
        {label ? <label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>{label}</label> : null}
        <div style={{ position: "relative" }}>
          <select
            value={value}
            onChange={(e) => onChange && onChange(e.target.value)}
            style={{
              appearance: "none", WebkitAppearance: "none", width: "100%", height: 42, padding: "0 38px 0 14px",
              font: "400 14px/1 var(--font-sans)", color: "var(--ink-900)", background: "var(--secondary)",
              border: "1px solid var(--border-strong)", borderRadius: "var(--radius-md)", cursor: "pointer",
            }}
          >
            {options.map((o) => <option key={o} value={o}>{o}</option>)}
          </select>
          <span style={{ position: "absolute", right: 13, top: "50%", transform: "translateY(-50%)", color: "var(--ink-500)", pointerEvents: "none", font: "12px/1 var(--font-sans)" }}>▾</span>
        </div>
        {hint ? <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 7 }}>{hint}</div> : null}
      </div>
    );
  }

  // Text field (cream by default; variant "plain" = white for API keys).
  function Field({ label, hint, value, placeholder, mono = false, variant = "cream", right = null, style = {} }) {
    const bg = variant === "plain" ? "var(--card)" : "var(--secondary)";
    return (
      <div style={{ ...style }}>
        {label ? <label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>{label}</label> : null}
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <input
            defaultValue={value} placeholder={placeholder}
            style={{
              flex: 1, height: 42, padding: "0 14px", background: bg,
              font: `400 13.5px/1 ${mono ? "var(--font-mono)" : "var(--font-sans)"}`, color: "var(--ink-900)",
              border: "1px solid var(--border-strong)", borderRadius: "var(--radius-md)", outline: "none",
            }}
          />
          {right}
        </div>
        {hint ? <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 7 }}>{hint}</div> : null}
      </div>
    );
  }

  // Notice / callout box. tone: "warning" (amber) | "danger" (red) | "info" (blue-tint).
  function Notice({ children, tone = "warning", style = {} }) {
    const tones = {
      warning: { bg: "var(--notice-bg)", bd: "var(--notice-border)", fg: "var(--notice-body)" },
      danger: { bg: "oklch(0.96 0.04 25)", bd: "oklch(0.85 0.09 25)", fg: "var(--oxblood-700)" },
      info: { bg: "oklch(0.96 0.03 250)", bd: "oklch(0.86 0.06 250)", fg: "oklch(0.42 0.10 255)" },
    };
    const t = tones[tone] || tones.warning;
    return <div style={{ background: t.bg, border: `1px solid ${t.bd}`, borderRadius: "var(--radius-lg)", padding: "14px 16px", font: "400 13px/1.5 var(--font-sans)", color: t.fg, ...style }}>{children}</div>;
  }

  // Radio card group (tone selectors). options: [{id,label,hint}]
  function RadioGroup({ value, onChange, options = [], style = {} }) {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 10, ...style }}>
        {options.map((o) => {
          const sel = value === o.id;
          return (
            <button key={o.id} onClick={() => onChange && onChange(o.id)} style={{
              display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left", cursor: "pointer",
              padding: "13px 16px", borderRadius: "var(--radius-md)",
              border: `1px solid ${sel ? "var(--oxblood-500)" : "var(--border)"}`,
              background: sel ? "var(--oxblood-100)" : "var(--card)",
            }}>
              <span style={{ width: 17, height: 17, borderRadius: "50%", flex: "none", border: `2px solid ${sel ? "#2563EB" : "var(--ink-400)"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                {sel ? <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#2563EB" }} /> : null}
              </span>
              <span style={{ font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>{o.label}</span>
              {o.hint ? <span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-500)" }}>{o.hint}</span> : null}
            </button>
          );
        })}
      </div>
    );
  }

  // Plain native radio row (Recording indicator).
  function RadioRow({ checked, label, onChange }) {
    return (
      <button onClick={onChange} style={{ display: "flex", alignItems: "center", gap: 11, background: "none", border: "none", cursor: "pointer", padding: "8px 0" }}>
        <span style={{ width: 16, height: 16, borderRadius: "50%", flex: "none", border: `2px solid ${checked ? "#2563EB" : "var(--ink-400)"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          {checked ? <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#2563EB" }} /> : null}
        </span>
        <span style={{ font: "400 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>{label}</span>
      </button>
    );
  }

  // Sub-section heading inside a screen (small caps, like "CORRECTIONS teach, search…").
  function SubHead({ children, note }) {
    return (
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, margin: "8px 0 14px" }}>
        <span style={{ font: "600 12px/1 var(--font-display)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-700, var(--ink-800))" }}>{children}</span>
        {note ? <span style={{ font: "italic 400 13px/1 var(--font-serif)", color: "var(--ink-500)" }}>{note}</span> : null}
      </div>
    );
  }

  window.RokkorKit = { Section, Inset, ToggleRow, Select, Field, Notice, RadioGroup, RadioRow, SubHead };
})();