// AppearanceScreen — runtime, user-facing theme controls. Persists to localStorage.
// Reads/writes the same `theme` object the rest of the app uses via setTheme().

const PALETTE = [
  { value: "#5b5bf5", name: "Indigo",   strong: "#4040d8", soft: "#eeefff" },
  { value: "#0fb67e", name: "Emerald",  strong: "#0a8a5e", soft: "#e3f6ed" },
  { value: "#e55a2b", name: "Sunset",   strong: "#bc4517", soft: "#fdebde" },
  { value: "#d63a8a", name: "Magenta",  strong: "#b1216e", soft: "#fde8f1" },
  { value: "#1d4ed8", name: "Cobalt",   strong: "#1741b4", soft: "#e1ebff" },
  { value: "#7c3aed", name: "Violet",   strong: "#5b21b6", soft: "#ede4ff" },
  { value: "#0891b2", name: "Teal",     strong: "#0e7490", soft: "#dff6fb" },
  { value: "#0b0d12", name: "Graphite", strong: "#000000", soft: "#e9eaed" },
];

const FONT_OPTIONS = [
  { value: "Geist",          stack: "'Geist', system-ui, sans-serif" },
  { value: "Inter",          stack: "'Inter', system-ui, sans-serif" },
  { value: "IBM Plex Sans",  stack: "'IBM Plex Sans', system-ui, sans-serif" },
  { value: "system",         stack: "-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif" },
];

const AppearanceScreen = ({ theme, setTheme, resetTheme }) => {
  const onColor = (value, name) => setTheme({ accent: value, accentName: name });

  return (
    <div className="hx-screen">
      <ScreenHeader icon={<IconPalette size={20}/>} title="Appearance"
        subtitle="Customize how this admin looks. Changes apply instantly and are saved to your browser." />

      <Card title="Primary color" subtitle="Used for buttons, links, and the active navigation state.">
        <div className="hx-pal-grid">
          {PALETTE.map(p => (
            <button key={p.value}
              className={`hx-pal ${theme.accent === p.value ? "on" : ""}`}
              onClick={() => onColor(p.value, p.name)}
              aria-label={p.name}>
              <span className="hx-pal-swatch" style={{ background: p.value }}/>
              <div className="hx-pal-meta">
                <span className="hx-pal-name">{p.name}</span>
                <span className="hx-pal-hex">{p.value}</span>
              </div>
              {theme.accent === p.value && <IconCheck size={14} className="hx-pal-check"/>}
            </button>
          ))}
        </div>
        <details className="hx-custom-color">
          <summary>Use a custom color</summary>
          <div className="hx-custom-row">
            <input type="color" value={theme.accent} onChange={e => onColor(e.target.value, "Custom")}/>
            <Input value={theme.accent} onChange={e => onColor(e.target.value, "Custom")} style={{ width: 160 }}/>
            <span className="hx-mini-note">Hex values are auto-applied. Secondary shades are derived from this color.</span>
          </div>
        </details>
      </Card>

      <Card title="Mode">
        <div className="hx-mode-grid">
          <ModeCard label="Light" active={theme.theme === "light"} onClick={() => setTheme({ theme: "light" })} preview={<ModePreview dark={false}/>}/>
          <ModeCard label="Dark"  active={theme.theme === "dark"}  onClick={() => setTheme({ theme: "dark"  })} preview={<ModePreview dark={true}/>}/>
        </div>
      </Card>

      <div className="hx-card-grid hx-2">
        <Card title="Density" subtitle="Controls padding and control heights across the app.">
          <SegRow value={theme.density} onChange={(v) => setTheme({ density: v })}
            options={[{ value: "compact", label: "Compact" }, { value: "comfy", label: "Comfortable" }, { value: "airy", label: "Airy" }]}/>
        </Card>

        <Card title="Corner radius" subtitle={`Currently ${theme.radius}px.`}>
          <input type="range" min={4} max={20} step={2} value={theme.radius}
            onChange={e => setTheme({ radius: Number(e.target.value) })}
            className="hx-range"/>
          <div className="hx-range-marks"><span>Sharp</span><span>Soft</span><span>Pillow</span></div>
        </Card>

        <Card title="Font family" subtitle="App-wide typeface.">
          <SegRow value={theme.font} onChange={(v) => setTheme({ font: v })}
            options={FONT_OPTIONS.map(f => ({ value: f.value, label: f.value === "system" ? "System" : f.value }))}/>
        </Card>

        <Card title="Sidebar style" subtitle="Layout of the left settings rail.">
          <SegRow value={theme.sidebar || "rail"} onChange={(v) => setTheme({ sidebar: v })}
            options={[{ value: "rail", label: "Rail" }, { value: "compact", label: "Compact" }]}/>
        </Card>
      </div>

      <Card title="Preview" subtitle="A few elements shown with the current theme.">
        <div className="hx-preview-row">
          <Btn kind="primary">Primary button</Btn>
          <Btn kind="secondary">Secondary</Btn>
          <Btn kind="ghost">Ghost</Btn>
          <Pill tone="accent">Accent pill</Pill>
          <Pill tone="good">Good</Pill>
          <Pill tone="warn">Warning</Pill>
        </div>
        <div className="hx-preview-row" style={{ marginTop: 12 }}>
          <Input placeholder="Input field" prefix={<IconSearch size={14}/>} style={{ minWidth: 220 }}/>
          <Toggle checked={true} onChange={() => {}}/>
          <Toggle checked={false} onChange={() => {}}/>
        </div>
      </Card>

      <Card title="Reset" subtitle="Restore the default theme defined by your project config.">
        <Btn kind="secondary" onClick={resetTheme}>Reset to defaults</Btn>
      </Card>

      <style>{`
        .hx-pal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .hx-pal {
          position: relative;
          display: flex; align-items: center; gap: 10px;
          padding: 10px 12px;
          background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
          cursor: pointer; font: inherit; color: var(--ink);
          text-align: left;
          transition: border-color .12s ease, background .12s ease;
        }
        .hx-pal:hover { border-color: color-mix(in oklab, var(--ink) 30%, transparent); }
        .hx-pal.on { border-color: var(--accent); background: var(--accent-soft); }
        .hx-pal-swatch { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
        .hx-pal-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
        .hx-pal-name { font-size: 13px; font-weight: 500; }
        .hx-pal-hex { font-size: 11px; color: var(--muted); font-family: var(--mono); }
        .hx-pal-check { color: var(--accent); flex-shrink: 0; }
        .hx-custom-color { margin-top: 14px; font-size: 13px; }
        .hx-custom-color summary { color: var(--muted); cursor: pointer; padding: 4px 0; user-select: none; }
        .hx-custom-color summary:hover { color: var(--ink-2); }
        .hx-custom-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
        .hx-custom-row input[type="color"] { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel); }
        .hx-mini-note { color: var(--muted); font-size: 12px; }
        .hx-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .hx-range { width: 100%; accent-color: var(--accent); }
        .hx-range-marks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
        .hx-preview-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

        @media (max-width: 900px) {
          .hx-pal-grid { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </div>
  );
};

const SegRow = ({ value, options, onChange }) => (
  <div className="hx-seg">
    {options.map(o => (
      <button key={o.value} className={`hx-seg-btn ${value === o.value ? "on" : ""}`}
        onClick={() => onChange(o.value)} type="button">{o.label}</button>
    ))}
    <style>{`
      .hx-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
      .hx-seg-btn {
        padding: 7px 14px; background: transparent; border: none; cursor: pointer;
        font: inherit; font-size: 13px; color: var(--ink-2); border-radius: 7px;
        transition: background .12s, color .12s;
      }
      .hx-seg-btn:hover { color: var(--ink); }
      .hx-seg-btn.on { background: var(--panel); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
    `}</style>
  </div>
);

const ModeCard = ({ label, active, preview, onClick }) => (
  <button onClick={onClick} className={`hx-mode-card ${active ? "on" : ""}`} type="button">
    <div className="hx-mode-prev">{preview}</div>
    <div className="hx-mode-foot">
      <span>{label}</span>
      {active ? <IconCheck size={14} className="hx-mode-check"/> : <span className="hx-mode-ring"/>}
    </div>
    <style>{`
      .hx-mode-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; transition: border-color .12s; }
      .hx-mode-card:hover { border-color: color-mix(in oklab, var(--ink) 30%, transparent); }
      .hx-mode-card.on { border-color: var(--accent); }
      .hx-mode-prev { border-radius: 8px; overflow: hidden; }
      .hx-mode-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 2px; font-size: 13.5px; font-weight: 500; }
      .hx-mode-check { color: var(--accent); }
      .hx-mode-ring { width: 14px; height: 14px; border: 1.5px solid var(--line); border-radius: 50%; }
    `}</style>
  </button>
);

const ModePreview = ({ dark }) => (
  <svg viewBox="0 0 240 130" width="100%" style={{ display: "block" }}>
    <rect width="240" height="130" fill={dark ? "#0b0d12" : "#f6f7f9"} />
    <rect x="0" y="0" width="240" height="22" fill={dark ? "#14171e" : "#ffffff"} />
    <circle cx="12" cy="11" r="4" fill="var(--accent)"/>
    <rect x="22" y="8" width="36" height="6" rx="2" fill={dark ? "#d6d8de" : "#0b0d12"}/>
    <rect x="0" y="22" width="60" height="108" fill={dark ? "#0b0d12" : "#f6f7f9"} />
    <rect x="8" y="32" width="44" height="6" rx="2" fill={dark ? "#232831" : "#e6e8ee"}/>
    <rect x="8" y="44" width="44" height="6" rx="2" fill="var(--accent)" opacity=".8"/>
    <rect x="8" y="56" width="44" height="6" rx="2" fill={dark ? "#232831" : "#e6e8ee"}/>
    <rect x="8" y="68" width="44" height="6" rx="2" fill={dark ? "#232831" : "#e6e8ee"}/>
    <rect x="68" y="32" width="80" height="40" rx="6" fill={dark ? "#14171e" : "#ffffff"} stroke={dark ? "#232831" : "#e6e8ee"}/>
    <rect x="156" y="32" width="80" height="40" rx="6" fill={dark ? "#14171e" : "#ffffff"} stroke={dark ? "#232831" : "#e6e8ee"}/>
    <rect x="68" y="80" width="80" height="40" rx="6" fill={dark ? "#14171e" : "#ffffff"} stroke={dark ? "#232831" : "#e6e8ee"}/>
    <rect x="156" y="80" width="80" height="40" rx="6" fill="var(--accent)"/>
    <rect x="76" y="44" width="50" height="4" rx="1.5" fill={dark ? "#d6d8de" : "#0b0d12"}/>
    <rect x="76" y="56" width="30" height="4" rx="1.5" fill={dark ? "#6b7280" : "#9aa1ad"}/>
  </svg>
);

window.AppearanceScreen = AppearanceScreen;