/* ============================================================
   PROGRESS PORTFOLIO — Settings (appearance, animations, sharing)
   ============================================================ */
function Toggle({ value, onChange }) {
  return <button className={"toggle" + (value ? " on" : "")} onClick={() => onChange(!value)}><span className="toggle-knob" /></button>;
}

function SettingsView({ state, setState, today, onNewGame, onCalibrate, authUser, onSignOut, onShowAuth, onWipeAccount }) {
  const P = window.PP;
  const s = state.settings;
  const org = s.organize || {};
  const [importCode, setImportCode] = useState("");
  const [importMsg, setImportMsg] = useState("");
  const previewRef = useRef(null);

  function setS(fn) { setState((st) => { const set = JSON.parse(JSON.stringify(st.settings)); fn(set); return { ...st, settings: set }; }); }
  function setOrg(k, v) { setS((set) => { set.organize = set.organize || {}; set.organize[k] = v; }); }

  const resolvedAnim = s.completionAnim === "theme" ? (P.THEMES[P.resolveThemeId(s, today)].anim) : s.completionAnim;

  function playPreview() {
    if (previewRef.current) window.runCompletionFx(previewRef.current, resolvedAnim, getComputedStyle(document.documentElement).getPropertyValue("--accent"));
  }

  const myCode = P.encodeShare(P.profileSnapshot(state.me));
  function addFriend() {
    const obj = P.decodeShare(importCode);
    if (!obj || obj.kind !== "profile") { setImportMsg("That doesn't look like a valid friend code."); return; }
    setState((st) => {
      if (st.friends.some((f) => f.id === obj.id) || obj.id === "me") { return st; }
      const friend = { id: obj.id, meta: obj.meta, days: obj.days || {}, business: obj.business || { income: [], youtube: [], channels: [], monthlyGoal: 0 }, presets: obj.presets || {}, customTasks: obj.customTasks || [], physiquePhotos: obj.physiquePhotos || [], unlocked: obj.unlocked || {} };
      return { ...st, friends: [...st.friends, friend] };
    });
    setImportMsg("Friend added! Find them on the Leaderboard."); setImportCode("");
  }
  function exportData() {
    const blob = new Blob([JSON.stringify(state, null, 2)], { type: "application/json" });
    const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "progress-portfolio.json"; a.click();
  }
  function copyCode() { navigator.clipboard && navigator.clipboard.writeText(myCode); setImportMsg("Friend code copied to clipboard."); }

  const rotation = s.rotation || [];
  function toggleRotation(id) { setS((set) => { set.rotation = set.rotation || []; const i = set.rotation.indexOf(id); if (i >= 0) set.rotation.splice(i, 1); else set.rotation.push(id); }); }

  return (
    <div className="settings-view">
      <div className="ql-head"><div><div className="ql-date">Settings</div><div className="ql-quote">Make it yours — themes, animations, layout, sharing.</div></div></div>

      <Card title="Appearance — Theme">
        <div className="theme-grid">
          {P.THEME_LIST.map((id) => {
            const th = P.THEMES[id];
            return (
              <button key={id} className={"theme-swatch" + (s.theme === id && s.themeMode === "fixed" ? " on" : "")} onClick={() => setS((set) => { set.theme = id; set.themeMode = "fixed"; })}
                style={{ background: th.vars["--bg"], borderColor: th.vars["--line"] }}>
                <div className="ts-bars">
                  <span style={{ background: th.vars["--accent"] }} /><span style={{ background: th.vars["--panel2"] }} /><span style={{ background: th.vars["--txt"] }} />
                </div>
                <div className="ts-name" style={{ color: th.vars["--txt"], fontFamily: th.sans }}>{th.name}</div>
                <div className="ts-group" style={{ color: th.vars["--dim"] }}>{th.group}</div>
              </button>
            );
          })}
        </div>
        <div className="settings-row">
          <span className="set-label">Theme mode</span>
          <Seg options={[{ value: "fixed", label: "Fixed" }, { value: "daily", label: "Rotate daily" }, { value: "random", label: "Random/day" }]} value={s.themeMode} onChange={(v) => setS((set) => (set.themeMode = v))} />
        </div>
        {s.themeMode !== "fixed" && (
          <div className="rotation-pick">
            <span className="set-sub mono dim">Themes in rotation:</span>
            <div className="rotation-chips">{P.THEME_LIST.map((id) => <button key={id} className={"chip" + (rotation.includes(id) ? " on" : "")} onClick={() => toggleRotation(id)}>{P.THEMES[id].name}</button>)}</div>
          </div>
        )}
      </Card>

      <Card title="Task completion animation">
        <div className="anim-layout">
          <div className="anim-grid">
            <button className={"anim-opt" + (s.completionAnim === "theme" ? " on" : "")} onClick={() => setS((set) => (set.completionAnim = "theme"))}><span className="ao-name">Match theme</span><span className="ao-sub mono">auto</span></button>
            {P.COMPLETION_ANIMS.map((a) => <button key={a.id} className={"anim-opt" + (s.completionAnim === a.id ? " on" : "")} onClick={() => setS((set) => (set.completionAnim = a.id))}><span className="ao-name">{a.name}</span>{a.particle && <span className="ao-sub mono">particles</span>}</button>)}
          </div>
          <div className="anim-preview">
            <div className="set-sub mono dim">Tap to preview</div>
            <div className="task anim-preview-task" ref={previewRef} onClick={playPreview}>
              <button className="check" onClick={playPreview}><span className="check-box">✓</span></button>
              <div className="task-main"><div className="task-label">Sample task</div></div>
              <span className="task-xp mono">tap →</span>
            </div>
          </div>
        </div>
      </Card>

      <Card title="Units">
        <div className="settings-row">
          <span className="set-label">Distance units</span>
          <Seg options={[{value:true,label:"Metric (km)"},{value:false,label:"Imperial (miles)"}]} value={s.useMetric !== false} onChange={(v) => setS(function(set) { set.useMetric = v; })} />
        </div>
      </Card>

      <Card title="Organization">
        <div className="settings-row"><span className="set-label">Density</span><Seg options={[{ value: "compact", label: "Compact" }, { value: "regular", label: "Regular" }, { value: "comfy", label: "Comfy" }]} value={org.density || "regular"} onChange={(v) => setOrg("density", v)} /></div>
        <div className="settings-row"><span className="set-label">Auto-collapse completed sections</span><Toggle value={org.collapseDone !== false} onChange={(v) => setOrg("collapseDone", v)} /></div>
        <div className="settings-row"><span className="set-label">Show daily quotes</span><Toggle value={org.showQuotes !== false} onChange={(v) => setOrg("showQuotes", v)} /></div>
        <div className="settings-row"><span className="set-label">Show XP gain pop-ups</span><Toggle value={org.showXpToasts !== false} onChange={(v) => setOrg("showXpToasts", v)} /></div>
      </Card>

      {!authUser && (
        <Card title="Friends (demo mode)">
          <div className="share-note dim" style={{ fontSize: 12, marginBottom: 14 }}>
            In demo mode, add friends by swapping codes. <b>Sign in to search and add real players instead.</b>
          </div>
          <div className="row-inline" style={{ marginBottom: 14 }}>
            <button className="btn btn-sm btn-accent" style={{ flex: 1 }} onClick={copyCode}>Copy my code</button>
            {importMsg && <span className="mono dim" style={{ fontSize: 11 }}>{importMsg}</span>}
          </div>
          <div className="row-inline">
            <input className="inp" style={{ flex: 1 }} value={importCode} placeholder="Paste a friend's code…" onChange={(e) => setImportCode(e.target.value)} />
            <button className="btn btn-sm btn-accent" disabled={!importCode.trim()} onClick={addFriend}>Add</button>
          </div>
          {importMsg && importMsg.includes("added") && <div className="mono" style={{ fontSize: 11, color: "var(--accent)", marginTop: 8 }}>{importMsg}</div>}
        </Card>
      )}

      {authUser && (
        <Card title="Privacy — what friends can see">
          <div className="dim" style={{ fontSize: 12.5, marginBottom: 14 }}>Everything is shared with accepted friends by default. Turn off anything you want to keep private.</div>
          {[
            { key: "showCalendar", label: "30-day calendar & completion history", def: true },
            { key: "showStats", label: "Attribute stats & breakdowns", def: true },
            { key: "showTasks", label: "Last 2 days task checklist", def: true },
            { key: "showBusiness", label: "Earnings (day / week / month)", def: true },
            { key: "showGoals", label: "Goals & streaks", def: true },
            { key: "showAchievements", label: "Achievements", def: true },
            { key: "showPhotos", label: "Physique photos", def: true },
            { key: "showFriends", label: "Friends list", def: true },
          ].map(({ key, label, def }) => {
            const val = s.privacy ? (s.privacy[key] !== undefined ? s.privacy[key] : def) : def;
            return (
              <div key={key} className="settings-row">
                <span className="set-label" style={{ flex: 1 }}>{label}</span>
                <Toggle value={val} onChange={(v) => setS((set) => { set.privacy = set.privacy || {}; set.privacy[key] = v; })} />
              </div>
            );
          })}
        </Card>
      )}

      <Card title="Account">
        <AccountPanel authUser={authUser} onSignOut={onSignOut} />
        {!authUser && (
          <div className="settings-row">
            <span className="set-label">Sign in</span>
            <button className="btn btn-sm btn-accent" onClick={onShowAuth}>Log in / Sign up</button>
          </div>
        )}
      </Card>

      <Card title="Your data">
        <div className="settings-row"><span className="set-label">Starting level test</span><button className="btn btn-sm" onClick={onCalibrate}>Calibrate level</button></div>
        <div className="settings-row"><span className="set-label">Backup</span><button className="btn btn-sm" onClick={exportData}>Export (.json)</button></div>
        {authUser ? (
          <div className="danger">
            <div className="dd-section-label">WIPE ACCOUNT</div>
            <p className="dim">Permanently deletes all your progress, friends, and cloud data. You will restart from zero with the level test. Cannot be undone.</p>
            <button className="btn btn-danger" onClick={onWipeAccount}>Wipe account and start over</button>
          </div>
        ) : (
          <div className="danger">
            <div className="dd-section-label">FRESH START</div>
            <p className="dim">You're on sample data with simulated rivals. Start clean to track for real — your rivals stay so you have someone to chase. You begin with no presets; import a pack or build your own.</p>
            <button className="btn btn-danger" onClick={onNewGame}>Start a fresh run (New Game)</button>
          </div>
        )}
      </Card>
    </div>
  );
}

Object.assign(window, { SettingsView, Toggle });