/* ============================================================
   COMMONS — Settings view
   ============================================================ */

function Toggle({ on, onChange }) {
  return (
    <button className="tg" data-on={on} onClick={() => onChange(!on)} role="switch" aria-checked={on}>
      <span className="tg-knob" />
    </button>
  );
}

function Field({ label, hint, children }) {
  return (
    <label className="field">
      <div className="field-l"><b>{label}</b>{hint && <span>{hint}</span>}</div>
      <div className="field-c">{children}</div>
    </label>
  );
}

const SETTINGS_NAV = [
  { id: "account", label: "Account", icon: "compass" },
  { id: "notifications", label: "Notifications", icon: "bell" },
  { id: "privacy", label: "Privacy & safety", icon: "lock" },
  { id: "location", label: "Location", icon: "pin" },
  { id: "appearance", label: "Appearance", icon: "eye" },
];

function Settings({ go, tweaks, setTweak }) {
  const [sec, setSec] = useState("account");
  const [form, setForm] = useState({
    name: "You", handle: "you", email: "you@ipanjab.com",
    bio: "Runner, occasional potter, and chronic over-RSVP-er.",
  });
  const [notif, setNotif] = useState({ reminders: true, replies: true, followers: true, digest: true, marketing: false });
  const [priv, setPriv] = useState({ private: false, showGoing: true, dms: true });
  const [who, setWho] = useState("everyone");
  const [radius, setRadius] = useState(5);
  const [units, setUnits] = useState("miles");
  const t = tweaks || {};
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div className="view settings">
      <div className="shell">
        <button className="back" onClick={() => go("profile")}><Icon name="arrowLeft" size={16} /> Profile</button>
        <h1 className="settings-title serif">Settings</h1>

        <div className="settings-layout">
          <aside className="settings-nav">
            {SETTINGS_NAV.map(s => (
              <button key={s.id} className="settings-navbtn" data-on={sec === s.id} onClick={() => setSec(s.id)}>
                <Icon name={s.icon} size={18} /> {s.label}
              </button>
            ))}
          </aside>

          <main className="settings-panel surface" key={sec}>
            {sec === "account" && (
              <section className="set-sec">
                <h2 className="serif">Account</h2>
                <div className="set-avarow">
                  <Avatar seed="you" label="You" size={64} />
                  <div>
                    <button className="btn btn-soft"><Icon name="camera" size={15} /> Change photo</button>
                    <span>JPG or PNG, up to 4MB.</span>
                  </div>
                </div>
                <Field label="Display name"><input value={form.name} onChange={e => set("name", e.target.value)} /></Field>
                <Field label="Username" hint="mycommons.city/@…"><div className="input-prefix"><span>@</span><input value={form.handle} onChange={e => set("handle", e.target.value)} /></div></Field>
                <Field label="Email"><input type="email" value={form.email} onChange={e => set("email", e.target.value)} /></Field>
                <Field label="Bio" hint="A line or two about you."><textarea rows={3} value={form.bio} onChange={e => set("bio", e.target.value)} /></Field>
                <div className="set-foot"><button className="btn btn-primary">Save changes</button><button className="btn btn-ghost">Cancel</button></div>
              </section>
            )}

            {sec === "notifications" && (
              <section className="set-sec">
                <h2 className="serif">Notifications</h2>
                <p className="set-lead">Choose what reaches you. We keep it quiet by default.</p>
                <Field label="Event reminders" hint="A nudge the day of, and an hour before."><Toggle on={notif.reminders} onChange={v => setNotif(n => ({ ...n, reminders: v }))} /></Field>
                <Field label="Replies & mentions" hint="When someone responds to you."><Toggle on={notif.replies} onChange={v => setNotif(n => ({ ...n, replies: v }))} /></Field>
                <Field label="New followers"><Toggle on={notif.followers} onChange={v => setNotif(n => ({ ...n, followers: v }))} /></Field>
                <Field label="Weekly digest" hint="The best of the diaspora, Fridays."><Toggle on={notif.digest} onChange={v => setNotif(n => ({ ...n, digest: v }))} /></Field>
                <Field label="Product & marketing"><Toggle on={notif.marketing} onChange={v => setNotif(n => ({ ...n, marketing: v }))} /></Field>
              </section>
            )}

            {sec === "privacy" && (
              <section className="set-sec">
                <h2 className="serif">Privacy & safety</h2>
                <Field label="Private profile" hint="Only approved followers see your activity."><Toggle on={priv.private} onChange={v => setPriv(p => ({ ...p, private: v }))} /></Field>
                <Field label="Show my RSVP status" hint="Let others see which events you're going to."><Toggle on={priv.showGoing} onChange={v => setPriv(p => ({ ...p, showGoing: v }))} /></Field>
                <Field label="Allow direct messages"><Toggle on={priv.dms} onChange={v => setPriv(p => ({ ...p, dms: v }))} /></Field>
                <div className="set-block">
                  <b>Who can see your posts</b>
                  <div className="set-radio">
                    {["everyone", "followers", "only me"].map(o => (
                      <button key={o} className="set-radio-btn" data-on={who === o} onClick={() => setWho(o)}>
                        <span className="radio-dot" />{o[0].toUpperCase() + o.slice(1)}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="set-danger">
                  <div><b>Deactivate account</b><span>Hide your profile and content. You can come back anytime.</span></div>
                  <button className="btn btn-ghost danger">Deactivate</button>
                </div>
              </section>
            )}

            {sec === "location" && (
              <section className="set-sec">
                <h2 className="serif">Location</h2>
                <p className="set-lead">We use this to show what's actually nearby. It's never shown publicly.</p>
                <Field label="Home city"><div className="input-icon"><Icon name="pin" size={16} /><input defaultValue="Worldwide" /></div></Field>
                <div className="set-block">
                  <div className="set-block-head"><b>Discovery radius</b><span className="set-val">{radius} {units}</span></div>
                  <input className="range" type="range" min="1" max="25" value={radius} onChange={e => setRadius(+e.target.value)} />
                  <div className="range-ticks"><span>1</span><span>25 {units}</span></div>
                </div>
                <div className="set-block">
                  <b>Units</b>
                  <div className="set-radio">
                    {["miles", "kilometers"].map(o => (
                      <button key={o} className="set-radio-btn" data-on={units === o} onClick={() => setUnits(o)}><span className="radio-dot" />{o}</button>
                    ))}
                  </div>
                </div>
              </section>
            )}

            {sec === "appearance" && (
              <section className="set-sec">
                <h2 className="serif">Appearance</h2>
                <p className="set-lead">These mirror the Tweaks panel — change them here for keeps.</p>
                <div className="set-block">
                  <b>Theme</b>
                  <div className="set-radio">
                    <button className="set-radio-btn" data-on={!t.dark} onClick={() => setTweak && setTweak("dark", false)}><span className="radio-dot" />Light</button>
                    <button className="set-radio-btn" data-on={t.dark} onClick={() => setTweak && setTweak("dark", true)}><span className="radio-dot" />Dark</button>
                  </div>
                </div>
                <div className="set-block">
                  <b>Accent color</b>
                  <div className="set-swatches">
                    {["#E8482A", "#2C4A6E", "#5E7355", "#6B3F5E", "#B98326"].map(c => (
                      <button key={c} className="set-swatch" data-on={t.accent === c} style={{ background: c }} onClick={() => setTweak && setTweak("accent", c)} aria-label={c}>
                        {t.accent === c && <Icon name="check" size={16} />}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="set-block">
                  <b>Headlines</b>
                  <div className="set-radio">
                    <button className="set-radio-btn" data-on={t.headline === "editorial"} onClick={() => setTweak && setTweak("headline", "editorial")}><span className="radio-dot" />Editorial serif</button>
                    <button className="set-radio-btn" data-on={t.headline === "modern"} onClick={() => setTweak && setTweak("headline", "modern")}><span className="radio-dot" />Modern sans</button>
                  </div>
                </div>
              </section>
            )}
          </main>
        </div>
      </div>
    </div>
  );
}

window.Settings = Settings;