// account.jsx — account settings + privacy page
const { useState: useStateA, useEffect: useEffectA } = React;

const __ACCOUNT_CSS = `
  .ac-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 32px 64px;
  }
  .ac-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-2);
    font-size: 13px; padding: 6px 10px;
    border-radius: var(--r-sm);
    margin-bottom: 24px;
    background: transparent; border: 0;
  }
  .ac-back:hover { background: var(--hover); color: var(--ink); }

  .ac-hero {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 32px;
  }
  .ac-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .ac-h {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
  }
  .ac-h .accent { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
  .ac-sub { color: var(--ink-2); margin: 0; max-width: 56ch; }

  .ac-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 16px;
  }
  .ac-card-h {
    padding: 18px 24px;
    border-bottom: 1px solid var(--hairline);
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px;
  }
  .ac-card-h-l { min-width: 0; flex: 1; }
  .ac-card-h h3 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
  }
  .ac-card-h p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
  }
  .ac-card-body { padding: 20px 24px 24px; }
  .ac-card-foot {
    padding: 14px 24px;
    border-top: 1px solid var(--hairline);
    background: color-mix(in oklab, var(--surface) 60%, var(--bg));
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--muted);
  }

  .ac-avatar-row {
    display: flex; align-items: center; gap: 20px;
  }
  .ac-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: grid; place-items: center;
    font-size: 28px; font-weight: 500;
    flex-shrink: 0;
    overflow: hidden;
    font-family: var(--font-serif); font-style: italic;
  }
  .ac-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .ac-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 640px) {
    .ac-grid-2 { grid-template-columns: 1fr; }
  }

  .ac-stat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 -24px;
    border-top: 1px solid var(--hairline);
    margin-top: 16px;
  }
  @media (max-width: 640px) { .ac-stat-grid { grid-template-columns: 1fr; } }
  .ac-stat {
    padding: 18px 24px;
    border-right: 1px solid var(--hairline);
  }
  .ac-stat:last-child { border-right: none; }
  @media (max-width: 640px) {
    .ac-stat { border-right: none; border-bottom: 1px solid var(--hairline); }
    .ac-stat:last-child { border-bottom: none; }
  }
  .ac-stat-n {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 32px;
    line-height: 1;
    color: var(--accent);
  }
  .ac-stat-l {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 6px;
  }

  .ac-danger { border-color: color-mix(in oklab, var(--danger) 30%, var(--hairline)); }
  .ac-danger .ac-card-h h3 { color: var(--danger); }

  /* Privacy page text */
  .pv-page { max-width: 760px; margin: 0 auto; padding: 32px 32px 64px; }
  .pv-page h2 {
    font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
    margin: 40px 0 8px;
  }
  .pv-page h2 .accent { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
  .pv-page p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 12px;
    max-width: 64ch;
    text-wrap: pretty;
  }
  .pv-page ul {
    padding-left: 22px;
    color: var(--ink-2);
    line-height: 1.65;
    margin: 0 0 16px;
    max-width: 64ch;
  }
  .pv-page ul li { margin-bottom: 6px; }
  .pv-page ul li::marker { color: var(--accent); }
`;

function AccountPage({ navigate, user, onLogout, onUserUpdate }) {
  const [name, setName] = useStateA(user?.name || "");
  const [email, setEmail] = useStateA(user?.email || "");
  const [pwOpen, setPwOpen] = useStateA(false);
  const [currentPw, setCurrentPw] = useStateA("");
  const [newPw, setNewPw] = useStateA("");
  const [confirmPw, setConfirmPw] = useStateA("");
  const [pwError, setPwError] = useStateA(null);
  const [delOpen, setDelOpen] = useStateA(false);
  const [confirmText, setConfirmText] = useStateA("");
  const [stats, setStats] = useStateA(null);
  const [profileSaving, setProfileSaving] = useStateA(false);
  const [toastNode, toast] = useToast();

  useEffectA(() => {
    api.getStats().then(setStats).catch(() => {});
  }, []);

  const saveProfile = async () => {
    setProfileSaving(true);
    try {
      const updated = await api.updateMe({ name, email });
      onUserUpdate?.(updated);
      toast("Profile saved");
    } catch (err) {
      toast(err.message || "Failed to save");
    } finally {
      setProfileSaving(false);
    }
  };

  const changePassword = async () => {
    setPwError(null);
    if (!currentPw) { setPwError("Current password is required"); return; }
    if (newPw.length < 8) { setPwError("New password must be at least 8 characters"); return; }
    if (newPw !== confirmPw) { setPwError("Passwords don't match"); return; }
    try {
      await api.updateMe({ currentPassword: currentPw, newPassword: newPw });
      setPwOpen(false);
      setCurrentPw(""); setNewPw(""); setConfirmPw("");
      toast("Password updated");
    } catch (err) {
      setPwError(err.message || "Failed to update password");
    }
  };

  const initial = (user?.name || user?.email || "?").charAt(0).toUpperCase();

  return (
    <div style={{ minHeight: "100vh" }}>
      <style>{__ACCOUNT_CSS}</style>
      {toastNode}

      {/* Header */}
      <header style={{
        borderBottom: "1px solid var(--hairline)",
        padding: "14px 32px",
        background: "color-mix(in oklab, var(--surface) 92%, var(--bg))",
      }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <a href="/" onClick={(e) => { e.preventDefault(); navigate("/"); }}><Brand /></a>
          <button className="btn btn-ghost btn-sm" onClick={() => navigate("/spaces")}>
            <I.ArrowL size={14} /> Back to library
          </button>
        </div>
      </header>

      <main className="ac-page">
        <div className="ac-hero">
          <div className="ac-eyebrow">Account</div>
          <h1 className="ac-h">Your <span className="accent">settings.</span></h1>
          <p className="ac-sub">Manage your profile, password, and library data. Everything is stored privately on your account.</p>
        </div>

        {/* Profile */}
        <section className="ac-card">
          <div className="ac-card-h">
            <div className="ac-card-h-l">
              <h3>Profile</h3>
              <p>Visible only to you.</p>
            </div>
          </div>
          <div className="ac-card-body">
            <div className="ac-avatar-row">
              <div className="ac-avatar">
                {user?.picture ? <img src={user.picture} alt="" /> : initial}
              </div>
              <div style={{ flex: 1 }}>
                <button className="btn btn-outline btn-sm" onClick={() => toast("Upload — coming soon")}>
                  Change photo
                </button>
                <p style={{ fontSize: 12, color: "var(--muted)", margin: "8px 0 0" }}>
                  PNG or JPG, up to 2MB.
                </p>
              </div>
            </div>
            <div style={{ height: 20 }} />
            <div className="ac-grid-2">
              <div>
                <label className="field-label">Name</label>
                <input className="input" value={name} onChange={(e) => setName(e.target.value)} />
              </div>
              <div>
                <label className="field-label">Email</label>
                <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
              </div>
            </div>
          </div>
          <div className="ac-card-foot">
            <span style={{ color: "var(--muted)" }}>Changes are saved to your account.</span>
            <button className="btn btn-accent btn-sm" onClick={saveProfile} disabled={profileSaving}>
              {profileSaving ? "Saving…" : "Save changes"}
            </button>
          </div>
        </section>

        {/* Library stats */}
        <section className="ac-card">
          <div className="ac-card-h">
            <div className="ac-card-h-l">
              <h3>Your library</h3>
              <p>A snapshot of what you've saved.</p>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => navigate("/spaces")}>
              Open library <I.ArrowR size={13} />
            </button>
          </div>
          <div className="ac-card-body" style={{ paddingBottom: 0 }}>
            <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 14 }}>
              On the <strong>Free</strong> plan.
            </p>
            <div className="ac-stat-grid">
              <div className="ac-stat">
                <div className="ac-stat-n">{stats?.bookmarks ?? "—"}</div>
                <div className="ac-stat-l">Bookmarks</div>
              </div>
              <div className="ac-stat">
                <div className="ac-stat-n">{stats?.folders ?? "—"}</div>
                <div className="ac-stat-l">Folders</div>
              </div>
              <div className="ac-stat">
                <div className="ac-stat-n">{stats?.tags ?? "—"}</div>
                <div className="ac-stat-l">Tags</div>
              </div>
            </div>
          </div>
        </section>

        {/* Security */}
        <section className="ac-card">
          <div className="ac-card-h">
            <div className="ac-card-h-l">
              <h3>Password</h3>
              <p>Choose a strong one and change it occasionally.</p>
            </div>
            <button className="btn btn-outline btn-sm" onClick={() => setPwOpen(true)}>
              Change password
            </button>
          </div>
        </section>

        {/* Data */}
        <section className="ac-card">
          <div className="ac-card-h">
            <div className="ac-card-h-l">
              <h3>Your data</h3>
              <p>Export everything as HTML or JSON. Your library is portable.</p>
            </div>
            <div style={{ display: "flex", gap: 8 }}>
              <button className="btn btn-outline btn-sm" onClick={async () => {
                try { await api.triggerExport('html'); toast("Exported as HTML"); }
                catch (err) { toast(err.message || "Export failed"); }
              }}>
                <I.Export size={13} /> Export HTML
              </button>
              <button className="btn btn-outline btn-sm" onClick={async () => {
                try { await api.triggerExport('json'); toast("Exported as JSON"); }
                catch (err) { toast(err.message || "Export failed"); }
              }}>
                <I.Export size={13} /> Export JSON
              </button>
            </div>
          </div>
        </section>

        {/* Danger zone */}
        <section className="ac-card ac-danger">
          <div className="ac-card-h">
            <div className="ac-card-h-l">
              <h3>Delete account</h3>
              <p>Removes your library and all data, immediately. This cannot be undone.</p>
            </div>
            <button className="btn btn-outline btn-sm" style={{ color: "var(--danger)", borderColor: "color-mix(in oklab, var(--danger) 40%, var(--hairline))" }}
                    onClick={() => setDelOpen(true)}>
              Delete account
            </button>
          </div>
        </section>

        <div style={{ marginTop: 32, textAlign: "center" }}>
          <button className="btn btn-ghost btn-sm" onClick={onLogout}>
            <I.Logout size={13} /> Sign out
          </button>
        </div>
      </main>

      {/* Password modal */}
      <Modal open={pwOpen} onClose={() => { setPwOpen(false); setPwError(null); setCurrentPw(""); setNewPw(""); setConfirmPw(""); }}
             title="Change password"
             subtitle="Use at least 8 characters."
             footer={
               <>
                 <button className="btn btn-ghost" onClick={() => { setPwOpen(false); setPwError(null); }}>Cancel</button>
                 <button className="btn btn-accent" onClick={changePassword}>
                   Update password
                 </button>
               </>
             }>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {pwError && (
            <div style={{ padding: "10px 12px", borderRadius: "var(--r-sm)", background: "color-mix(in oklab, var(--danger) 12%, transparent)", color: "var(--danger)", fontSize: 13, border: "1px solid color-mix(in oklab, var(--danger) 30%, transparent)" }}>
              {pwError}
            </div>
          )}
          <div>
            <label className="field-label">Current password</label>
            <input className="input" type="password" placeholder="••••••••" value={currentPw} onChange={(e) => setCurrentPw(e.target.value)} />
          </div>
          <div>
            <label className="field-label">New password</label>
            <input className="input" type="password" placeholder="At least 8 characters" value={newPw} onChange={(e) => setNewPw(e.target.value)} />
          </div>
          <div>
            <label className="field-label">Confirm new password</label>
            <input className="input" type="password" placeholder="Repeat" value={confirmPw} onChange={(e) => setConfirmPw(e.target.value)} />
          </div>
        </div>
      </Modal>

      {/* Delete account modal */}
      <Modal open={delOpen} onClose={() => { setDelOpen(false); setConfirmText(""); }} title="Delete your account?"
             subtitle="This will permanently remove your bookmarks, folders, and tags. We can't recover them after."
             footer={
               <>
                 <button className="btn btn-ghost" onClick={() => { setDelOpen(false); setConfirmText(""); }}>Cancel</button>
                 <button className="btn btn-accent"
                         style={{ background: "var(--danger)", borderColor: "var(--danger)", opacity: confirmText === "DELETE" ? 1 : 0.4 }}
                         disabled={confirmText !== "DELETE"}
                         onClick={async () => {
                           try { await api.deleteMe(); } catch {}
                           setDelOpen(false);
                           onLogout();
                         }}>
                   Delete account permanently
                 </button>
               </>
             }>
        <p style={{ margin: "0 0 12px", color: "var(--ink-2)", fontSize: 13.5 }}>
          Type <span className="mono" style={{ background: "var(--surface-2)", padding: "1px 6px", borderRadius: 4 }}>DELETE</span> to confirm.
        </p>
        <input className="input" placeholder="Type DELETE" value={confirmText} onChange={(e) => setConfirmText(e.target.value)} />
      </Modal>
    </div>
  );
}

// ── Privacy page ──
function PrivacyPage({ navigate }) {
  return (
    <div style={{ minHeight: "100vh" }}>
      <style>{__ACCOUNT_CSS}</style>
      <header style={{
        borderBottom: "1px solid var(--hairline)",
        padding: "14px 32px",
        background: "color-mix(in oklab, var(--surface) 92%, var(--bg))",
      }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <a href="/" onClick={(e) => { e.preventDefault(); navigate("/"); }}><Brand /></a>
          <button className="btn btn-ghost btn-sm" onClick={() => navigate("/")}>
            <I.ArrowL size={14} /> Back home
          </button>
        </div>
      </header>

      <main className="pv-page">
        <div className="ac-hero" style={{ marginTop: 16 }}>
          <div className="ac-eyebrow">Privacy</div>
          <h1 className="ac-h">Your data, <span className="accent">your terms.</span></h1>
          <p className="ac-sub">A short, human-readable summary of what we collect, what we don't, and why.</p>
        </div>

        <h2>The <span className="accent">short version.</span></h2>
        <p>
          BUKMAK stores bookmarks, folders, and tags you save. We don't sell your data, we don't run third-party trackers,
          and we don't follow you across the web. If you delete your account, we delete your data.
        </p>

        <h2>What we <span className="accent">collect.</span></h2>
        <ul>
          <li>Your account name and email, so you can sign in.</li>
          <li>The bookmarks, folders, and tags you save.</li>
          <li>A minimal log of API requests, retained for 30 days, for debugging and abuse prevention.</li>
        </ul>

        <h2>What we <span className="accent">don't.</span></h2>
        <ul>
          <li>Third-party analytics, ad networks, or behavioral trackers.</li>
          <li>Browsing history outside of what you explicitly save.</li>
          <li>Sharing or selling your data — ever.</li>
        </ul>

        <h2>Your <span className="accent">controls.</span></h2>
        <ul>
          <li>Export everything as HTML or JSON at any time.</li>
          <li>Delete individual bookmarks, folders, tags, or your entire account.</li>
          <li>Get a copy of your data on request — within 7 days.</li>
        </ul>

        <h2>Questions?</h2>
        <p>
          Write to <a href="mailto:support@bukmak.com" style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>support@bukmak.com</a> — we read everything.
        </p>

        <p style={{ marginTop: 48, fontSize: 12, color: "var(--muted)" }}>
          Last updated <span className="mono">May 2026</span>. We'll let you know if anything changes materially.
        </p>
      </main>
    </div>
  );
}

window.AccountPage = AccountPage;
window.PrivacyPage = PrivacyPage;