/* Profile & Membership */
const { useState } = React;
const { Ring, Eyebrow, Placeholder, Icon, DataRow } = window;

function Profile({ profile, setProfile, onLogout, tweaks, setTweak }) {
  const [tab, setTab] = useState("account"); // account | membership | goals | appearance | security
  const [redeemCode, setRedeemCode] = useState("");
  const [redeemMsg, setRedeemMsg] = useState(null);
  const [nickname, setNickname] = useState(profile.nickname || "Juan");
  const [daysLeft, setDaysLeft] = useState(profile.daysLeft || 24);

  function redeem() {
    const found = window.MOCK.ACCESS_CODES[redeemCode.trim().toUpperCase()];
    if (!found) { setRedeemMsg({ kind: "err", text: "Invalid code" }); return; }
    setDaysLeft(d => d + found.days);
    setRedeemMsg({ kind: "ok", text: `+${found.days} days added (${found.label}).` });
    setRedeemCode("");
  }

  return (
    <div className="col fade-in" style={{ gap: 28 }}>
      <div className="between" style={{ alignItems: "end" }}>
        <div>
          <Eyebrow>Account</Eyebrow>
          <h1 className="h-hero" style={{ marginTop: 12, fontSize: 56 }}>Settings.</h1>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={onLogout}>
          <Icon name="logout" size={14} /> Log out
        </button>
      </div>

      <div className="seg" style={{ alignSelf: "flex-start", flexWrap: "wrap" }}>
        <button className={tab === "account"    ? "on" : ""} onClick={() => setTab("account")}>Account</button>
        <button className={tab === "membership" ? "on" : ""} onClick={() => setTab("membership")}>Membership</button>
        <button className={tab === "goals"      ? "on" : ""} onClick={() => setTab("goals")}>Goals & TDEE</button>
        <button className={tab === "appearance" ? "on" : ""} onClick={() => setTab("appearance")}>Appearance</button>
        <button className={tab === "security"   ? "on" : ""} onClick={() => setTab("security")}>Security</button>
      </div>

      {tab === "account" && (
        <div className="grid-2" style={{ gap: 20 }}>
          <div className="card">
            <Eyebrow>Profile photo</Eyebrow>
            <div className="row" style={{ gap: 20, marginTop: 14 }}>
              <Placeholder label="profile" style={{ width: 120, height: 120, borderRadius: "50%" }} />
              <div className="col" style={{ gap: 8, justifyContent: "center", flex: 1 }}>
                <div style={{ fontWeight: 600 }}>1:1 ratio, &gt; 400px</div>
                <div className="muted" style={{ fontSize: 13 }}>JPG or PNG, max 5MB</div>
                <div className="row" style={{ gap: 8, marginTop: 6 }}>
                  <button className="btn btn-primary btn-sm">Upload</button>
                  <button className="btn btn-ghost btn-sm">Remove</button>
                </div>
              </div>
            </div>
          </div>
          <div className="card col" style={{ gap: 16 }}>
            <Eyebrow>Identity</Eyebrow>
            <div className="field">
              <label className="field-label">Nickname (shown on dashboard)</label>
              <input className="field-input" value={nickname} onChange={e => setNickname(e.target.value)} />
            </div>
            <div className="field">
              <label className="field-label">Full name</label>
              <input className="field-input" defaultValue="Juan Santos" />
            </div>
            <div className="field">
              <label className="field-label">Email</label>
              <input className="field-input" defaultValue="juan@example.com" />
            </div>
            <button className="btn btn-primary btn-sm" style={{ alignSelf: "flex-start" }}
              onClick={() => setProfile(p => ({ ...p, nickname }))}>
              Save changes
            </button>
          </div>
        </div>
      )}

      {tab === "membership" && (
        <div className="grid-2" style={{ gap: 20 }}>
          <div className="card" style={{ background: "var(--fg)", color: "var(--bg)", padding: 32 }}>
            <Eyebrow style={{ color: "var(--bg-soft)", opacity: 0.7 }}>Active membership</Eyebrow>
            <div className="h-data" style={{ fontSize: 80, marginTop: 12, color: "var(--bg)" }}>
              {daysLeft}
              <span style={{ fontSize: 18, fontWeight: 400, color: "var(--bg-soft)", opacity: 0.7 }}> days</span>
            </div>
            <div className="muted" style={{ color: "var(--bg-soft)", opacity: 0.7, fontSize: 14, marginTop: 8 }}>
              Expires Apr 07, 2026 • Coach: Tito Fit
            </div>
            <hr className="divider" style={{ background: "var(--fg-dim)", margin: "24px 0" }} />
            <Eyebrow style={{ color: "var(--bg-soft)", opacity: 0.7 }}>Redeem a code</Eyebrow>
            <div className="row" style={{ gap: 8, marginTop: 12 }}>
              <input className="field-input mono"
                placeholder="FIT-30"
                value={redeemCode}
                onChange={e => setRedeemCode(e.target.value)}
                style={{ background: "var(--bg)", color: "var(--fg)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }} />
              <button className="btn btn-primary" onClick={redeem}>Redeem</button>
            </div>
            {redeemMsg && (
              <div className="mono" style={{ marginTop: 12, fontSize: 12,
                color: redeemMsg.kind === "ok" ? "var(--accent)" : "var(--m-protein)" }}>
                {redeemMsg.text}
              </div>
            )}
          </div>

          <div className="card flush">
            <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--line)" }}>
              <Eyebrow>Recent activity</Eyebrow>
            </div>
            <div className="col" style={{ gap: 0 }}>
              {[
                ["+30 days", "FIT-30 redeemed", "Mar 02, 2026"],
                ["+7 days",  "FIT-7 trial",     "Feb 23, 2026"],
                ["Login",    "Web · iOS Safari","Feb 21, 2026"],
                ["+90 days", "FIT-90 redeemed", "Nov 17, 2025"],
              ].map((row, i) => (
                <div key={i} className="row" style={{
                  padding: "14px 24px",
                  borderBottom: i < 3 ? "1px solid var(--line-soft)" : "none",
                  gap: 16,
                }}>
                  <span className="chip mono" style={{ minWidth: 80, justifyContent: "center" }}>{row[0]}</span>
                  <div style={{ flex: 1, fontSize: 14 }}>{row[1]}</div>
                  <span className="muted mono" style={{ fontSize: 12 }}>{row[2]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === "goals" && (
        <div className="grid-2" style={{ gap: 20 }}>
          <div className="card" style={{ padding: 32 }}>
            <Eyebrow>Current target</Eyebrow>
            <div className="row" style={{ gap: 24, marginTop: 16, alignItems: "center" }}>
              <Ring value={profile.target} max={profile.tdee} size={140} stroke={14}
                label={profile.target.toLocaleString()} sub="kcal/day" />
              <div className="col" style={{ gap: 10, flex: 1 }}>
                <DataRow k="Sex" v={profile.sex === "female" ? "Female" : "Male"} />
                <DataRow k="Age" v={profile.age} />
                <DataRow k="Weight" v={profile.weightKg.toFixed(1) + " kg"} />
                <DataRow k="Height" v={profile.heightCm + " cm"} />
                <DataRow k="Activity" v={window.TDEE.ACTIVITY.find(a => a.id === profile.activity)?.label} />
                <hr className="divider" />
                <DataRow k="TDEE" v={profile.tdee.toLocaleString() + " kcal"} muted />
                <DataRow k="Goal" v={profile.goal === "lose" ? "Lose" : profile.goal === "gain" ? "Gain" : "Maintain"} />
                <DataRow k="Level" v={profile.level} />
              </div>
            </div>
            <button className="btn btn-primary btn-sm" style={{ marginTop: 20 }}>Re-run TDEE calculator</button>
          </div>

          <div className="card col" style={{ gap: 16 }}>
            <Eyebrow>Daily macros</Eyebrow>
            <div className="grid-3" style={{ gap: 12 }}>
              {[
                ["Protein", profile.macros.protein, "g", "var(--m-protein)"],
                ["Carbs",   profile.macros.carbs,   "g", "var(--m-carbs)"],
                ["Fat",     profile.macros.fat,     "g", "var(--m-fat)"],
              ].map(([k, v, u, c]) => (
                <div key={k} className="card sunken" style={{ padding: 14 }}>
                  <div className="row" style={{ gap: 6, marginBottom: 6 }}>
                    <span className="tag-dot" style={{ background: c }} />
                    <span className="eyebrow">{k}</span>
                  </div>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{v}<span className="muted" style={{ fontSize: 12, fontWeight: 400 }}>{u}</span></div>
                </div>
              ))}
            </div>
            <hr className="divider" />
            <Eyebrow>Auto-balance</Eyebrow>
            <div className="row between" style={{ gap: 12 }}>
              <div style={{ fontSize: 14, color: "var(--fg-muted)", flex: 1 }}>
                Redistribute over/under to remaining days so weekly target lands.
              </div>
              <Toggle on={true} />
            </div>
            <Eyebrow>Weekly weigh-in reminder</Eyebrow>
            <div className="row between" style={{ gap: 12 }}>
              <div style={{ fontSize: 14, color: "var(--fg-muted)", flex: 1 }}>
                Sundays at 8:00 AM
              </div>
              <Toggle on={true} />
            </div>
          </div>
        </div>
      )}

      {tab === "appearance" && (
        <div className="grid-2" style={{ gap: 20 }}>
          <div className="card col" style={{ gap: 16 }}>
            <Eyebrow>Theme</Eyebrow>
            <div className="row" style={{ gap: 12 }}>
              {[
                { id: "dark",  label: "Dark",  bg: "oklch(0.14 0.005 95)", fg: "oklch(0.97 0.005 95)" },
                { id: "light", label: "Light", bg: "oklch(0.99 0.003 95)", fg: "oklch(0.16 0.01 95)" },
              ].map(t => {
                const on = (tweaks?.theme || "dark") === t.id;
                return (
                  <button key={t.id} onClick={() => setTweak("theme", t.id)}
                          style={{
                            flex: 1, padding: 0,
                            border: "2px solid " + (on ? "var(--accent)" : "var(--line)"),
                            borderRadius: 16, overflow: "hidden",
                            cursor: "pointer",
                          }}>
                    <div style={{
                      height: 110, background: t.bg, position: "relative",
                      display: "flex", alignItems: "flex-end", padding: 14,
                    }}>
                      <div style={{ width: "60%", height: 14, background: t.fg, opacity: 0.9, borderRadius: 4 }} />
                      <div style={{ position: "absolute", top: 14, left: 14,
                        width: 16, height: 16, borderRadius: 4, background: "var(--accent)" }} />
                      <div style={{ position: "absolute", top: 18, right: 14,
                        fontFamily: "var(--f-mono)", fontSize: 9, color: t.fg, opacity: 0.5, textTransform: "uppercase", letterSpacing: "0.08em" }}>
                        Preview
                      </div>
                    </div>
                    <div className="between" style={{ padding: "10px 14px" }}>
                      <span style={{ fontWeight: 600, fontSize: 13 }}>{t.label}</span>
                      {on && <span className="chip solid" style={{ fontSize: 10, padding: "2px 8px" }}>Current</span>}
                    </div>
                  </button>
                );
              })}
            </div>
            <p className="muted" style={{ fontSize: 12, margin: 0 }}>
              Dark mode is the default, made for late-night meal logging.
            </p>
          </div>

          <div className="card col" style={{ gap: 16 }}>
            <Eyebrow>Accent color</Eyebrow>
            <div className="row" style={{ gap: 10, flexWrap: "wrap" }}>
              {[
                { id: "lime",     hex: "#d2ff3a", label: "Neon Lime"  },
                { id: "orange",   hex: "#ff7a3a", label: "Burnt Orange" },
                { id: "electric", hex: "#3a8aff", label: "Electric"   },
                { id: "magenta",  hex: "#ff3aa0", label: "Magenta"    },
              ].map(a => {
                const on = (tweaks?.accent || "lime") === a.id;
                return (
                  <button key={a.id} onClick={() => setTweak("accent", a.id)}
                          style={{
                            display: "flex", flexDirection: "column", gap: 8,
                            padding: 12,
                            border: "2px solid " + (on ? "var(--fg)" : "var(--line)"),
                            borderRadius: 14, cursor: "pointer",
                            background: "var(--bg)",
                            flex: "1 1 calc(50% - 5px)", minWidth: 0,
                          }}>
                    <div style={{
                      height: 36, background: a.hex, borderRadius: 8,
                      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.04)",
                    }} />
                    <div className="between" style={{ width: "100%" }}>
                      <span style={{ fontWeight: 600, fontSize: 12 }}>{a.label}</span>
                      {on && <Icon name="check" size={14} color="var(--accent)" />}
                    </div>
                  </button>
                );
              })}
            </div>
            <p className="muted" style={{ fontSize: 12, margin: 0 }}>
              Picks the brand color used across rings, buttons, and highlights.
            </p>
          </div>

          <div className="card col" style={{ gap: 12, gridColumn: "1 / -1" }}>
            <Eyebrow>Density</Eyebrow>
            <div className="seg" style={{ alignSelf: "flex-start" }}>
              <button className={(tweaks?.density || "comfy") === "comfy"   ? "on" : ""} onClick={() => setTweak("density", "comfy")}>Comfortable</button>
              <button className={(tweaks?.density || "comfy") === "compact" ? "on" : ""} onClick={() => setTweak("density", "compact")}>Compact</button>
            </div>
            <p className="muted" style={{ fontSize: 12, margin: 0 }}>
              Compact mode tightens card padding for one-thumb scrolling on phones.
            </p>
          </div>
        </div>
      )}

      {tab === "security" && (
        <div className="grid-2" style={{ gap: 20 }}>
          <div className="card col" style={{ gap: 14 }}>
            <Eyebrow>Change password</Eyebrow>
            <div className="field">
              <label className="field-label">Current</label>
              <input className="field-input" type="password" defaultValue="********" />
            </div>
            <div className="field">
              <label className="field-label">New password</label>
              <input className="field-input" type="password" />
            </div>
            <div className="field">
              <label className="field-label">Confirm new password</label>
              <input className="field-input" type="password" />
            </div>
            <button className="btn btn-primary btn-sm" style={{ alignSelf: "flex-start" }}>Update password</button>
          </div>
          <div className="card col" style={{ gap: 16 }}>
            <Eyebrow>Sessions</Eyebrow>
            {[
              ["MacBook Pro · Chrome", "Manila • Active now", true],
              ["iPhone 15 · Safari",   "Manila • 2 days ago", false],
              ["iPad · Safari",        "Cebu • Mar 04",        false],
            ].map((row, i) => (
              <div key={i} className="row between" style={{ paddingBottom: 14, borderBottom: i < 2 ? "1px solid var(--line-soft)" : "none" }}>
                <div className="col" style={{ gap: 2 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{row[0]}</div>
                  <div className="muted mono" style={{ fontSize: 12 }}>{row[1]}</div>
                </div>
                {row[2]
                  ? <span className="chip" style={{ background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "transparent" }}>Current</span>
                  : <button className="btn btn-ghost btn-sm">Sign out</button>}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function Toggle({ on }) {
  const [val, setVal] = useState(on);
  return (
    <button onClick={() => setVal(v => !v)}
      style={{
        width: 44, height: 26, borderRadius: 999,
        background: val ? "var(--accent)" : "var(--line)",
        position: "relative", transition: "background .15s",
        flex: "none",
      }}>
      <span style={{
        position: "absolute", top: 3, left: val ? 21 : 3,
        width: 20, height: 20, background: val ? "var(--accent-ink)" : "var(--bg)",
        borderRadius: "50%", transition: "left .18s ease",
      }} />
    </button>
  );
}

Object.assign(window, { Profile });