// ─── SETTINGS / PERSONALIZATION ───────────────────────────
const SettingsScreen = ({ tweaks, setTweak }) => {
  const [section, setSection] = React.useState("appearance");

  const accents = [
    { id: "amber",  hex: "#e8a23a" },
    { id: "rust",   hex: "#c8312b" },
    { id: "blue",   hex: "#4f8cff" },
    { id: "violet", hex: "#7c5cff" },
    { id: "moss",   hex: "#2cb67d" },
    { id: "bone",   hex: "#e8e3d8" },
  ];

  const sections = [
    { id: "appearance", label: "Appearance", icon: "sun" },
    { id: "workspace",  label: "Workspace",  icon: "kanban" },
    { id: "integrations", label: "Integrations", icon: "link" },
    { id: "team",       label: "Team",       icon: "user" },
    { id: "about",      label: "About",      icon: "globe" },
  ];

  return (
    <div className="content-pad" data-screen-label="06 Settings">
      <div className="page-head">
        <div>
          <div className="page-title display">Settings</div>
          <div className="page-sub">Personalize the workspace — changes apply instantly and persist</div>
        </div>
      </div>

      <div className="settings-layout">
        <nav className="settings-nav">
          {sections.map(s => (
            <button
              key={s.id}
              className={`nav-item ${section === s.id ? "is-active" : ""}`}
              onClick={() => setSection(s.id)}
            >
              <span className="nav-icon"><Icon name={s.icon} size={14}/></span>
              {s.label}
            </button>
          ))}
        </nav>

        <div>
          {section === "appearance" && (
            <div>
              <div className="card">
                <div className="card-head"><div className="card-title">Theme</div></div>
                <div className="card-body" style={{ paddingTop: 4 }}>
                  <div className="settings-row">
                    <div>
                      <div className="label">Color mode</div>
                      <div className="help">Dark mode is recommended for late-night development sessions.</div>
                    </div>
                    <div className="seg">
                      <button className={tweaks.theme === "dark" ? "is-on" : ""} onClick={() => setTweak("theme", "dark")}>
                        <Icon name="moon" size={11}/> Dark
                      </button>
                      <button className={tweaks.theme === "light" ? "is-on" : ""} onClick={() => setTweak("theme", "light")}>
                        <Icon name="sun" size={11}/> Light
                      </button>
                    </div>
                  </div>

                  <div className="settings-row">
                    <div>
                      <div className="label">Atmosphere</div>
                      <div className="help">Clean is a neutral CRM look. Atmospheric adds film grain, a vignette and serif headings — for when you're in the mood.</div>
                    </div>
                    <div className="seg">
                      <button className={tweaks.mood === "clean" ? "is-on" : ""} onClick={() => setTweak("mood", "clean")}>Clean</button>
                      <button className={tweaks.mood === "atmospheric" ? "is-on" : ""} onClick={() => setTweak("mood", "atmospheric")}>Atmospheric</button>
                    </div>
                  </div>

                  <div className="settings-row">
                    <div>
                      <div className="label">Accent color</div>
                      <div className="help">Used for actions, focus states, and progress indicators.</div>
                    </div>
                    <div className="swatch-row">
                      {accents.map(a => (
                        <button
                          key={a.id}
                          type="button"
                          className={`swatch ${tweaks.accent === a.hex ? "is-active" : ""}`}
                          style={{ background: a.hex }}
                          onClick={() => setTweak("accent", a.hex)}
                          title={a.id}
                          aria-label={a.id}
                        />
                      ))}
                    </div>
                  </div>

                  <div className="settings-row">
                    <div>
                      <div className="label">Corner radius</div>
                      <div className="help">Sharp = utilitarian / brutalist. Soft = modern CRM.</div>
                    </div>
                    <div className="seg">
                      <button className={tweaks.radius === "sharp" ? "is-on" : ""} onClick={() => setTweak("radius", "sharp")}>Sharp</button>
                      <button className={tweaks.radius === "default" ? "is-on" : ""} onClick={() => setTweak("radius", "default")}>Default</button>
                      <button className={tweaks.radius === "soft" ? "is-on" : ""} onClick={() => setTweak("radius", "soft")}>Soft</button>
                    </div>
                  </div>

                  <div className="settings-row">
                    <div>
                      <div className="label">Density</div>
                      <div className="help">Compact fits more on screen for long Kanban sessions.</div>
                    </div>
                    <div className="seg">
                      <button className={tweaks.density === "comfortable" ? "is-on" : ""} onClick={() => setTweak("density", "comfortable")}>Comfortable</button>
                      <button className={tweaks.density === "compact" ? "is-on" : ""} onClick={() => setTweak("density", "compact")}>Compact</button>
                    </div>
                  </div>

                  <div className="settings-row">
                    <div>
                      <div className="label">Sidebar position</div>
                      <div className="help">Move the primary nav to the other side. Useful for left-handed trackpad use.</div>
                    </div>
                    <div className="seg">
                      <button className={tweaks.sidebar === "left" ? "is-on" : ""} onClick={() => setTweak("sidebar", "left")}>Left</button>
                      <button className={tweaks.sidebar === "right" ? "is-on" : ""} onClick={() => setTweak("sidebar", "right")}>Right</button>
                    </div>
                  </div>
                </div>
              </div>

              <div className="card" style={{ marginTop: 14 }}>
                <div className="card-head"><div className="card-title">Preview</div><div className="card-sub">Live sample card</div></div>
                <div className="card-body">
                  <div className="kb-card" style={{ maxWidth: 280 }}>
                    <div className="kb-card-head">
                      <span className="kb-card-id mono">HUSK-088</span>
                      <PrioDot p="high"/>
                    </div>
                    <div className="kb-card-title">Hallucination Director — peripheral movement template</div>
                    <div className="muted small" style={{ marginBottom: 6 }}>Implement the Lucidity 0.4–0.7 bucket.</div>
                    <div className="kb-card-meta"><TagChip tag="code"/></div>
                    <div className="kb-card-foot">
                      <span className="due"><Icon name="calendar" size={11}/>May 18</span>
                      <div className="kb-avatars"><Avatar id="ka" size={20}/></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {section === "workspace" && (
            <div className="card">
              <div className="card-head"><div className="card-title">Workspace</div></div>
              <div className="card-body">
                <div className="settings-row">
                  <div>
                    <div className="label">Project name</div>
                    <div className="help">Internal codename. Displayed in the sidebar and crumbs.</div>
                  </div>
                  <input className="filter-btn" defaultValue="HUSK (working title)" style={{ minWidth: 220, padding: "5px 10px" }}/>
                </div>
                <div className="settings-row">
                  <div>
                    <div className="label">Default landing screen</div>
                    <div className="help">Where you land when you open the app.</div>
                  </div>
                  <select className="filter-btn" defaultValue="dashboard" style={{ padding: "5px 10px" }}>
                    <option value="dashboard">Dashboard</option>
                    <option value="kanban">Kanban</option>
                    <option value="wiki">Wiki / Codex</option>
                    <option value="tasks">Tasks</option>
                    <option value="ideas">Ideas</option>
                  </select>
                </div>
                <div className="settings-row">
                  <div>
                    <div className="label">Notifications</div>
                    <div className="help">Bell badge for vault sync + mentions.</div>
                  </div>
                  <div className="toggle is-on"/>
                </div>
                <div className="settings-row">
                  <div>
                    <div className="label">Reduce motion</div>
                    <div className="help">Disables sticky-note hover lift and atmospheric grain animation.</div>
                  </div>
                  <div className="toggle"/>
                </div>
              </div>
            </div>
          )}

          {section === "integrations" && (
            <div>
              <div className="card">
                <div className="card-head"><div className="card-title">Connected sources</div></div>
                <div className="card-body" style={{ padding: 0 }}>
                  <IntegrationRow
                    name="Obsidian Vault"
                    desc="Drives the wiki codex from /Obsidian/HUSK"
                    status="Connected · synced 5h ago"
                    color="#7c3aed"
                    glyph="◇"
                    connected
                  />
                  <IntegrationRow
                    name="Lucid Spark"
                    desc="System diagrams · 3 boards linked"
                    status="Connected"
                    color="#ff8a3d"
                    glyph="✦"
                    connected
                  />
                  <IntegrationRow
                    name="Unreal Engine — Project Notes"
                    desc="Agentic capture from in-editor sessions"
                    status="Connected · live"
                    color="#2cb67d"
                    glyph="◆"
                    connected
                  />
                  <IntegrationRow
                    name="Plastic SCM"
                    desc="Build status & commit references"
                    status="Not connected"
                    color="#6aa6ff"
                    glyph="◈"
                  />
                  <IntegrationRow
                    name="Discord"
                    desc="Channel webhook for task moves"
                    status="Not connected"
                    color="#5865f2"
                    glyph="◉"
                  />
                </div>
              </div>
            </div>
          )}

          {section === "team" && (
            <div className="card">
              <div className="card-head"><div className="card-title">Team</div><div className="card-sub">3 members · Fried Yams Studios</div></div>
              <div className="card-body" style={{ padding: 0 }}>
                {window.TEAM.map(m => (
                  <div key={m.id} className="settings-row" style={{ padding: "14px 16px" }}>
                    <div className="row" style={{ gap: 12 }}>
                      <Avatar id={m.id} size={36}/>
                      <div>
                        <div className="label">{m.name}</div>
                        <div className="help">{m.role}</div>
                      </div>
                    </div>
                    <div className="row">
                      <span className="chip">Owner</span>
                      <button className="btn ghost small"><Icon name="more" size={13}/></button>
                    </div>
                  </div>
                ))}
                <div style={{ padding: "12px 16px", borderTop: "1px solid var(--line)" }}>
                  <button className="btn"><Icon name="plus" size={13}/> Invite member</button>
                </div>
              </div>
            </div>
          )}

          {section === "about" && (
            <div className="card">
              <div className="card-head"><div className="card-title">About</div></div>
              <div className="card-body">
                <div className="settings-row">
                  <div>
                    <div className="label">Studio</div>
                    <div className="help">Fried Yams Studios · est. 2025</div>
                  </div>
                </div>
                <div className="settings-row">
                  <div>
                    <div className="label">Project</div>
                    <div className="help"><span className="mono">HUSK</span> · First-person horror · Unreal Engine 5.4</div>
                  </div>
                </div>
                <div className="settings-row">
                  <div>
                    <div className="label">Version</div>
                    <div className="help mono">CRM 0.4.2 · build 2026.05.13</div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const IntegrationRow = ({ name, desc, status, color, glyph, connected }) => (
  <div className="settings-row" style={{ padding: "14px 16px", borderBottom: "1px solid var(--line)" }}>
    <div className="row" style={{ gap: 12 }}>
      <div style={{
        width: 36, height: 36,
        background: color, color: "#fff",
        borderRadius: "var(--r-sm)",
        display: "grid", placeItems: "center",
        fontSize: 18, fontWeight: 700,
      }}>{glyph}</div>
      <div>
        <div className="label">{name}</div>
        <div className="help">{desc}</div>
      </div>
    </div>
    <div className="row">
      <span className="chip" style={ connected ? { color: "var(--done)", borderColor: "color-mix(in oklab, var(--done) 40%, transparent)", background: "color-mix(in oklab, var(--done) 12%, transparent)" } : {}}>
        {connected && <span className="dot" style={{ background: "var(--done)" }}/>}
        {status}
      </span>
      <button className={connected ? "btn ghost small" : "btn small"}>
        {connected ? "Manage" : "Connect"}
      </button>
    </div>
  </div>
);

window.SettingsScreen = SettingsScreen;