// ═══════════════════════════════════════════════════════════════
//  ui.jsx — brand theme + shared form controls + monoline icons
// ═══════════════════════════════════════════════════════════════
const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";

// Brand palette → light & dark app chrome
const THEME_LIGHT = {
  bg: "#E9E6DF",        // desktop behind the sheet
  panel: "#F4F1EA",     // paper
  surface: "#FFFFFF",
  ink: "#0B1F2A",
  sub: "#5E6B72",
  faint: "#8A949A",
  line: "rgba(11,31,42,0.12)",
  lineStrong: "rgba(11,31,42,0.22)",
  blue: "#2D5BFF",
  blueSoft: "rgba(45,91,255,0.10)",
  sage: "#7BAA8A",
  mint: "#C8E6C9",
  field: "#FFFFFF",
  danger: "#C9472B",
};
const THEME_DARK = {
  bg: "#06121A",
  panel: "#0B1F2A",
  surface: "#11293580",
  ink: "#EAF0F2",
  sub: "#9FB0B8",
  faint: "#6B7C84",
  line: "rgba(234,240,242,0.12)",
  lineStrong: "rgba(234,240,242,0.22)",
  blue: "#5B82FF",
  blueSoft: "rgba(91,130,255,0.14)",
  sage: "#7BAA8A",
  mint: "#C8E6C9",
  field: "rgba(255,255,255,0.04)",
  danger: "#F0795E",
};

// ─── Bracket-cursor mark (brand primary) ───
function Mark({ size = 32, color = "#0B1F2A", accent = "#2D5BFF", sw = 4 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" style={{ display: "block" }}>
      <path d="M22 14 H 14 V 50 H 22" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
      <path d="M28 22 L 42 32 L 28 42" stroke={accent} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ─── Monoline icons (24 viewBox, currentColor) ───
function Icon({ name, size = 17, sw = 1.7 }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    doc: <><path d="M6 3h8l4 4v14H6z" {...p} /><path d="M14 3v4h4" {...p} /><path d="M9 12h6M9 16h6" {...p} /></>,
    plus: <><path d="M12 5v14M5 12h14" {...p} /></>,
    history: <><path d="M4 5v5h5" {...p} /><path d="M4.5 10a8 8 0 1 1 .5 5" {...p} /><path d="M12 8v4l3 2" {...p} /></>,
    users: <><circle cx="9" cy="8" r="3" {...p} /><path d="M3.5 19a5.5 5.5 0 0 1 11 0" {...p} /><path d="M16 6a3 3 0 0 1 0 6M17 19a5.5 5.5 0 0 0-3-5" {...p} /></>,
    box: <><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z" {...p} /><path d="M4 7.5l8 4.5 8-4.5M12 12v9" {...p} /></>,
    repeat: <><path d="M4 9a5 5 0 0 1 5-5h7l-2-2M20 15a5 5 0 0 1-5 5H8l2 2" {...p} /></>,
    chart: <><path d="M4 20V4M4 20h16" {...p} /><path d="M8 16v-4M12 16V8M16 16v-7" {...p} /></>,
    gear: <><circle cx="12" cy="12" r="3" {...p} /><path d="M12 2v3M12 19v3M5 5l2 2M17 17l2 2M2 12h3M19 12h3M5 19l2-2M17 7l2-2" {...p} /></>,
    print: <><path d="M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-2" {...p} /><path d="M7 14h10v7H7z" {...p} /></>,
    download: <><path d="M12 3v12M7 11l5 4 5-4M5 20h14" {...p} /></>,
    trash: <><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" {...p} /></>,
    copy: <><rect x="8" y="8" width="12" height="12" rx="2" {...p} /><path d="M4 16V5a1 1 0 0 1 1-1h11" {...p} /></>,
    edit: <><path d="M4 20h4L18 10l-4-4L4 16z" {...p} /><path d="M14 6l4 4" {...p} /></>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" {...p} /><circle cx="12" cy="12" r="2.5" {...p} /></>,
    save: <><path d="M5 3h11l3 3v15H5z" {...p} /><path d="M8 3v6h7M8 21v-6h8v6" {...p} /></>,
    check: <><path d="M5 12l5 5L19 7" {...p} /></>,
    x: <><path d="M6 6l12 12M18 6L6 18" {...p} /></>,
    sun: <><circle cx="12" cy="12" r="4" {...p} /><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19" {...p} /></>,
    moon: <><path d="M20 14a8 8 0 1 1-10-10 6 6 0 0 0 10 10z" {...p} /></>,
    search: <><circle cx="11" cy="11" r="6" {...p} /><path d="M16 16l4 4" {...p} /></>,
    chevron: <><path d="M9 6l6 6-6 6" {...p} /></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: "block", flexShrink: 0 }}>{paths[name]}</svg>;
}

// ─── Field (label + input) ───
function Field({ label, value, onChange, type = "text", placeholder = "", T, mono, flex = 1, minWidth = 0, suffix }) {
  return (
    <div style={{ flex, minWidth, display: "flex", flexDirection: "column", gap: 5 }}>
      {label && <Label T={T}>{label}</Label>}
      <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
        <input
          type={type} value={value} placeholder={placeholder}
          onChange={(e) => onChange(e.target.value)}
          style={{
            width: "100%", padding: "9px 12px", paddingRight: suffix ? 38 : 12,
            border: `1px solid ${T.line}`, borderRadius: 7, fontSize: 13,
            fontFamily: MONO, fontWeight: 500, color: T.ink, background: T.field,
            outline: "none", boxSizing: "border-box", letterSpacing: mono ? "0" : "-0.01em",
          }}
          onFocus={(e) => { e.target.style.borderColor = T.blue; e.target.style.boxShadow = `0 0 0 3px ${T.blueSoft}`; }}
          onBlur={(e) => { e.target.style.borderColor = T.line; e.target.style.boxShadow = "none"; }}
        />
        {suffix && <span style={{ position: "absolute", right: 11, fontSize: 11, color: T.faint, fontFamily: MONO, pointerEvents: "none" }}>{suffix}</span>}
      </div>
    </div>
  );
}

function Label({ children, T }) {
  return <label style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: T.faint }}>{children}</label>;
}

// ─── Select ───
function Select({ label, value, onChange, options, T, flex = 1, minWidth = 0 }) {
  return (
    <div style={{ flex, minWidth, display: "flex", flexDirection: "column", gap: 5 }}>
      {label && <Label T={T}>{label}</Label>}
      <div style={{ position: "relative" }}>
        <select
          value={value} onChange={(e) => onChange(e.target.value)}
          style={{
            width: "100%", padding: "9px 32px 9px 12px", border: `1px solid ${T.line}`, borderRadius: 7,
            fontSize: 13, fontFamily: MONO, fontWeight: 500, color: T.ink, background: T.field,
            outline: "none", boxSizing: "border-box", cursor: "pointer", appearance: "none",
          }}
          onFocus={(e) => { e.target.style.borderColor = T.blue; }}
          onBlur={(e) => { e.target.style.borderColor = T.line; }}
        >
          {options.map((o, i) => <option key={i} value={o.v ?? o}>{o.l ?? o}</option>)}
        </select>
        <div style={{ position: "absolute", right: 9, top: "50%", transform: "translateY(-50%) rotate(90deg)", color: T.faint, pointerEvents: "none" }}><Icon name="chevron" size={14} /></div>
      </div>
    </div>
  );
}

// ─── TextArea ───
function TextArea({ label, value, onChange, placeholder, T, rows = 2 }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
      {label && <Label T={T}>{label}</Label>}
      <textarea
        value={value} rows={rows} placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        style={{
          width: "100%", padding: "9px 12px", border: `1px solid ${T.line}`, borderRadius: 7,
          fontSize: 13, fontFamily: MONO, fontWeight: 500, color: T.ink, background: T.field,
          outline: "none", boxSizing: "border-box", resize: "vertical", lineHeight: 1.5,
        }}
        onFocus={(e) => { e.target.style.borderColor = T.blue; }}
        onBlur={(e) => { e.target.style.borderColor = T.line; }}
      />
    </div>
  );
}

// ─── Button ───
function Button({ children, onClick, T, kind = "ghost", icon, size = "md", danger, title, style = {} }) {
  const pad = size === "sm" ? "6px 11px" : "9px 16px";
  const fs = size === "sm" ? 11 : 12.5;
  const base = {
    display: "inline-flex", alignItems: "center", gap: 7, padding: pad, borderRadius: 7,
    fontSize: fs, fontWeight: 600, fontFamily: MONO, cursor: "pointer", letterSpacing: "-0.01em",
    border: "1px solid transparent", whiteSpace: "nowrap", transition: "all .12s", ...style,
  };
  const kinds = {
    primary: { background: T.blue, color: "#fff", borderColor: T.blue },
    solid:   { background: T.ink, color: T.panel, borderColor: T.ink },
    ghost:   { background: "transparent", color: danger ? T.danger : T.ink, borderColor: danger ? T.danger : T.line },
    plain:   { background: "transparent", color: danger ? T.danger : T.sub, borderColor: "transparent" },
  };
  return (
    <button onClick={onClick} title={title} style={{ ...base, ...kinds[kind] }}
      onMouseEnter={(e) => { e.currentTarget.style.opacity = "0.86"; }}
      onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; }}>
      {icon && <Icon name={icon} size={fs + 2} />}{children}
    </button>
  );
}

Object.assign(window, { MONO, THEME_LIGHT, THEME_DARK, Mark, Icon, Field, Label, Select, TextArea, Button });