/* Settings — profile, password reset, theme, sign-out. */

const { useState: useSS, useEffect: useSE } = React;

function ViewSettings({ theme, onThemeToggle, onSignedOut, onProfileUpdated }) {
  const [name, setName]         = useSS("");
  const [email, setEmail]       = useSS("");
  const [busy, setBusy]         = useSS(false);
  const [status, setStatus]     = useSS("");
  const [pwStatus, setPwStatus] = useSS("");

  useSE(() => {
    (async () => {
      const r = await Api.me();
      if (r.ok && r.data) {
        setName(r.data.name || "");
        setEmail(r.data.email || "");
      }
    })();
  }, []);

  async function save() {
    setBusy(true); setStatus("");
    const r = await Api.saveProfile({ name: name.trim(), email: email.trim() });
    setBusy(false);
    if (r.ok) {
      const profile = {
        name: (r.data && r.data.name) || name.trim(),
        email: (r.data && r.data.email) || email.trim(),
      };
      setName(profile.name);
      setEmail(profile.email);
      if (onProfileUpdated) onProfileUpdated(profile);
      setStatus("Saved.");
    } else {
      setStatus("Couldn't save. Try again.");
    }
  }

  async function sendReset() {
    setPwStatus("Sending…");
    const r = await Api.forgot(email.trim());
    setPwStatus(r.ok ? "Reset link sent to your inbox." : "Couldn't send the link.");
  }

  async function signOut() {
    await Api.signOut();
    onSignedOut();
  }

  return (
    <div className="surface-pad">
      <h1>Settings</h1>
      <p className="sub">Account · appearance · session</p>

      <div className="admin-card">
        <div className="admin-card-head"><h2>Profile</h2></div>
        <div className="admin-card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <label className="auth-field">
            <span className="auth-field-label">Name</span>
            <input value={name} onChange={(e) => setName(e.target.value)} maxLength={120}/>
          </label>
          <label className="auth-field">
            <span className="auth-field-label">Email</span>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} maxLength={200}/>
          </label>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <button className="btn primary" onClick={save} disabled={busy}>{busy ? "Saving…" : "Save changes"}</button>
            {status && <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{status}</span>}
          </div>
        </div>
      </div>

      <div className="admin-card">
        <div className="admin-card-head"><h2>Password</h2></div>
        <div className="admin-card-body">
          <p style={{ margin: "0 0 12px", color: "var(--ink-3)", fontSize: 13 }}>
            A single-use reset link is emailed to the address above.
          </p>
          <button className="btn ghost" onClick={sendReset}>Send reset link</button>
          {pwStatus && <span className="mono" style={{ marginLeft: 12, fontSize: 11, color: "var(--ink-3)" }}>{pwStatus}</span>}
        </div>
      </div>

      <div className="admin-card">
        <div className="admin-card-head"><h2>Appearance</h2></div>
        <div className="admin-card-body">
          <div className="setting-row">
            <span className="label">Theme</span>
            <button className="btn ghost" onClick={onThemeToggle}>
              <span className="mono" style={{ textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10.5 }}>
                {theme === "dark" ? "Dark" : "Light"}
              </span>
            </button>
          </div>
        </div>
      </div>

      <div className="admin-card">
        <div className="admin-card-head"><h2>Session</h2></div>
        <div className="admin-card-body">
          <button className="btn ghost" onClick={signOut} style={{ color: "var(--miss)" }}>Sign out</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ViewSettings });