// ===========================================================
// AccountSettings — manage display name, email, password; links to
// the user's public collection; sign out. Display name writes to
// profiles.display_name (used on leaderboards) AND auth metadata
// (used in the nav). Reuses window.BBR_supabase / window.BBR_auth.
//
// Props: { user, onBack, onSignOut, onViewPublic }
// ===========================================================
const { useState: useAcctState, useEffect: useAcctEffect } = React;

function acctSince(iso) {
  if (!iso) return null;
  const d = String(iso).slice(0, 10).split("-");
  const mo = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][parseInt(d[1], 10) - 1] || "";
  return mo + " " + d[0];
}

function AccountSettings({ user, onBack, onSignOut, onViewPublic }) {
  const [profile, setProfile] = useAcctState(null);
  const [name, setName] = useAcctState(user.name || "");
  const [email, setEmail] = useAcctState(user.email || "");
  const [curPw, setCurPw] = useAcctState("");
  const [newPw, setNewPw] = useAcctState("");
  const [confirmPw, setConfirmPw] = useAcctState("");
  const [busy, setBusy] = useAcctState("");
  const [msg, setMsg] = useAcctState({});

  useAcctEffect(() => {
    let cancelled = false;
    window.BBR_supabase.from("profiles")
      .select("display_name,created_at,accepted_public_terms_at,is_public").eq("id", user.id).maybeSingle()
      .then(({ data }) => {
        if (cancelled || !data) return;
        setProfile(data);
        if (data.display_name) setName(data.display_name);
      });
    return () => { cancelled = true; };
  }, [user.id]);

  const setStat = (k, v) => setMsg(m => Object.assign({}, m, { [k]: v }));

  async function saveName() {
    const n = name.trim();
    if (!n) { setStat("name", "Display name can't be empty."); return; }
    setBusy("name");
    try {
      const { error } = await window.BBR_supabase.from("profiles").update({ display_name: n }).eq("id", user.id);
      if (error) throw error;
      await window.BBR_supabase.auth.updateUser({ data: { name: n } });
      setStat("name", "Saved. This is the name shown on your collection and the leaderboards.");
    } catch (e) { setStat("name", "Couldn't save: " + e.message); }
    finally { setBusy(""); }
  }

  async function saveEmail() {
    const e2 = email.trim();
    if (!e2 || e2 === user.email) { setStat("email", "Enter a new email address."); return; }
    setBusy("email");
    try {
      const { error } = await window.BBR_supabase.auth.updateUser({ email: e2 });
      if (error) throw error;
      setStat("email", "Confirmation sent. Click the link in your inbox to finish the change.");
    } catch (e) { setStat("email", "Couldn't update: " + e.message); }
    finally { setBusy(""); }
  }

  async function savePassword() {
    if (!curPw) { setStat("pw", "Enter your current password."); return; }
    if (newPw.length < 8) { setStat("pw", "New password must be at least 8 characters."); return; }
    if (newPw !== confirmPw) { setStat("pw", "New passwords don't match."); return; }
    setBusy("pw");
    try {
      // Verify identity with the current password (no email round-trip).
      const { error: authErr } = await window.BBR_supabase.auth.signInWithPassword({ email: user.email, password: curPw });
      if (authErr) { setStat("pw", "Current password is incorrect."); setBusy(""); return; }
      const { error } = await window.BBR_supabase.auth.updateUser({ password: newPw });
      if (error) throw error;
      setCurPw(""); setNewPw(""); setConfirmPw("");
      setStat("pw", "Password updated.");
    } catch (e) { setStat("pw", "Couldn't update: " + e.message); }
    finally { setBusy(""); }
  }

  async function sendReset() {
    try { await window.BBR_auth.resetPassword(user.email); setStat("pw", "Reset link sent to " + user.email + "."); }
    catch (e) { setStat("pw", "Couldn't send: " + e.message); }
  }

  const since = profile && acctSince(profile.created_at);

  return (
    <div className="acct">
      <button className="lb-back" onClick={onBack}>← My Collection</button>

      <div className="acct-head">
        <span className="acct-avatar">{user.initials}</span>
        <div>
          <h1 className="lb-title">Account settings</h1>
          <div className="acct-sub">{user.email}{since ? " · member since " + since : ""}</div>
        </div>
      </div>

      {/* Display name */}
      <div className="acct-card">
        <div className="acct-card-k">Display name</div>
        <p className="acct-card-d">Shown on your collection and the public leaderboards.</p>
        <div className="acct-row">
          <input value={name} onChange={e => setName(e.target.value)} placeholder="Display name" />
          <button className="acct-btn" disabled={busy === "name"} onClick={saveName}>{busy === "name" ? "Saving…" : "Save"}</button>
        </div>
        {msg.name && <div className="acct-msg">{msg.name}</div>}
      </div>

      {/* Email */}
      <div className="acct-card">
        <div className="acct-card-k">Email address</div>
        <p className="acct-card-d">Used to sign in. Changing it needs confirmation from the new address.</p>
        <div className="acct-row">
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com" />
          <button className="acct-btn" disabled={busy === "email"} onClick={saveEmail}>{busy === "email" ? "Sending…" : "Update"}</button>
        </div>
        {msg.email && <div className="acct-msg">{msg.email}</div>}
      </div>

      {/* Notifications. Renders nothing where push is unavailable (no service worker,
          permission already blocked at the browser level, or iOS before install), so
          this card only appears when there is actually something to switch. */}
      {window.PushOptIn && (
        <div className="acct-card">
          <div className="acct-card-k">Notifications</div>
          <p className="acct-card-d">Browser alerts, separate from email. You can turn these off here at any time.</p>
          <PushOptIn variant="row" user={user} />
        </div>
      )}

      {/* Password */}
      <div className="acct-card">
        <div className="acct-card-k">Password</div>
        <p className="acct-card-d">Enter your current password, then choose a new one.</p>
        <div className="acct-col">
          <input type="password" value={curPw} onChange={e => setCurPw(e.target.value)} placeholder="Current password" autoComplete="current-password" />
          <input type="password" value={newPw} onChange={e => setNewPw(e.target.value)} placeholder="New password (min 8 chars)" autoComplete="new-password" />
          <input type="password" value={confirmPw} onChange={e => setConfirmPw(e.target.value)} placeholder="Confirm new password" autoComplete="new-password" />
          <button className="acct-btn" disabled={busy === "pw"} onClick={savePassword}>{busy === "pw" ? "Saving…" : "Change password"}</button>
        </div>
        <button className="acct-link" onClick={sendReset}>Forgot your current password? Email a reset link</button>
        {msg.pw && <div className="acct-msg">{msg.pw}</div>}
      </div>

      {/* Collection visibility */}
      <div className="acct-card">
        <div className="acct-card-k">Collection visibility</div>
        <p className="acct-card-d">
          Your collection is currently <b>{profile && profile.is_public ? "public" : "private"}</b>.{" "}
          {profile && profile.is_public
            ? "It's visible to anyone — including item conditions and estimated values — and appears on the leaderboards under your display name."
            : "Nobody can open it. You still appear on the leaderboards anonymously: your rank, your total and how many records you own are shown, but not your name, not which records they are, and your collection page stays closed."}
          {" "}Change this with the Public / Private switch on your collection page.
        </p>
        {profile && profile.is_public && (
          <button className="acct-btn ghost" onClick={() => window.open(window.location.origin + "/collector/" + user.id, "_blank", "noopener")}>View my public collection ↗</button>
        )}
      </div>

      {/* Sign out */}
      <div className="acct-card">
        <div className="acct-card-k">Session</div>
        <button className="acct-btn danger" onClick={onSignOut}>Sign out</button>
      </div>
    </div>
  );
}

Object.assign(window, { AccountSettings });