// ===========================================================
// 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").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>

      {/* 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>

      {/* Public collection */}
      <div className="acct-card">
        <div className="acct-card-k">Your public collection</div>
        <p className="acct-card-d">
          Your collection — including item conditions and estimated values — is <b>public</b> and appears on the leaderboards under your display name.
          {profile && profile.accepted_public_terms_at ? " You accepted this when you added your first record." : ""}
        </p>
        <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 });