// Quizrs — Settings (appearance + account). Replaces the prototype's floating
// Tweaks panel; values persist to localStorage via the store.

function SettingRow({ label, hint, children }) {
  return (
    <div className="row" style={{ justifyContent: "space-between", gap: 16, padding: "14px 0", borderTop: "1px solid var(--hairline)" }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 14 }}>{label}</div>
        {hint && <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{hint}</div>}
      </div>
      <div style={{ flex: "0 0 auto" }}>{children}</div>
    </div>
  );
}

function Settings({ go }) {
  const { settings, setSetting, ACCENTS, user, usage } = useStore();

  return (
    <div className="screen-pad fade">
      <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-.5px", margin: "0 0 4px" }}>Settings</h2>
      <div className="muted" style={{ fontSize: 13.5, marginBottom: 22 }}>Personalize the workspace. Appearance is saved on this device.</div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, alignItems: "start" }}>
        <section className="card card-pad">
          <h3 className="h-sec" style={{ margin: "0 0 4px" }}>Appearance</h3>

          <SettingRow label="Accent color" hint="Used across buttons and highlights">
            <div className="row" style={{ gap: 8 }}>
              {Object.keys(ACCENTS).map((c) => {
                const on = settings.accent === c;
                return (
                  <button key={c} onClick={() => setSetting("accent", c)} aria-label={c}
                    style={{ width: 26, height: 26, borderRadius: 8, cursor: "pointer", background: c,
                      border: "2px solid " + (on ? "var(--ink)" : "transparent"),
                      boxShadow: on ? "0 0 0 2px var(--surface)" : "none", outline: on ? "1px solid var(--ink)" : "none" }} />
                );
              })}
            </div>
          </SettingRow>

          <SettingRow label="Theme">
            <SegBar value={settings.theme} onChange={(v) => setSetting("theme", v)} options={[["light", "Light"], ["dark", "Dark"]]} />
          </SettingRow>

          <SettingRow label="Density" hint="Spacing of cards and lists">
            <SegBar value={settings.density} onChange={(v) => setSetting("density", v)} options={[["comfy", "Comfy"], ["compact", "Compact"]]} />
          </SettingRow>

          <SettingRow label="Corner radius" hint={settings.radius + "px"}>
            <input type="range" min={4} max={20} step={1} value={settings.radius} onChange={(e) => setSetting("radius", Number(e.target.value))} style={{ width: 160 }} />
          </SettingRow>
        </section>

        <section className="card card-pad">
          <h3 className="h-sec" style={{ margin: "0 0 4px" }}>Account</h3>
          <div className="row" style={{ gap: 12, padding: "16px 0 14px" }}>
            <Avatar name={user?.name || "You"} size={44} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>{user?.name || "You"}</div>
              <div className="muted" style={{ fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{user?.email || ""}</div>
            </div>
            <span style={{ flex: 1 }} />
            <Badge tone="accent">{usage?.plan || user?.plan || "free"}</Badge>
          </div>
          <SettingRow label="Plan usage" hint="Quizzes generated this period">
            <span className="tnum" style={{ fontWeight: 700, fontSize: 14 }}>
              {usage ? `${usage.quizzesUsed}${usage.quotaLimit != null ? " / " + usage.quotaLimit : ""}` : "—"}
            </span>
          </SettingRow>
          <SettingRow label="Classic UI" hint="The previous interface (same account & data)">
            <Btn kind="ghost" sm icon="arrowR" onClick={() => (window.location.href = "app-classic.html")}>Open classic</Btn>
          </SettingRow>
          <SettingRow label="Sign out">
            <Btn kind="ghost" sm icon="x" onClick={() => window.quizrsAuth?.signOut?.()}>Sign out</Btn>
          </SettingRow>
        </section>
      </div>
    </div>
  );
}

window.Settings = Settings;