// Profile / Account page — own info, password change, active sessions

function ProfilePage() {
  const u = window.APP_USER || {};
  const [name, setName] = useState(u.name || '');
  const [savingName, setSavingName] = useState(false);
  const [nameMsg, setNameMsg] = useState(null);

  const [oldPw, setOldPw] = useState('');
  const [newPw, setNewPw] = useState('');
  const [newPw2, setNewPw2] = useState('');
  const [savingPw, setSavingPw] = useState(false);
  const [pwMsg, setPwMsg] = useState(null);

  const [sessions, setSessions] = useState([]);
  const [loadingSessions, setLoadingSessions] = useState(true);

  useEffect(() => {
    apiFetch('/api/auth/sessions')
      .then(r => r.json())
      .then(setSessions)
      .catch(() => {})
      .finally(() => setLoadingSessions(false));
  }, []);

  const saveName = async (e) => {
    e.preventDefault();
    if (!name.trim()) return;
    setSavingName(true);
    setNameMsg(null);
    try {
      const r = await apiFetch('/api/auth/me', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim() }),
      });
      if (!r.ok) throw new Error((await r.json()).detail?.message || 'שמירה נכשלה');
      const data = await r.json();
      window.APP_USER = data.user;
      setNameMsg({ kind: 'ok', text: 'נשמר ✓' });
    } catch (err) {
      setNameMsg({ kind: 'err', text: err.message });
    } finally {
      setSavingName(false);
    }
  };

  const changePw = async (e) => {
    e.preventDefault();
    if (newPw !== newPw2) {
      setPwMsg({ kind: 'err', text: 'הסיסמאות החדשות לא תואמות' });
      return;
    }
    if (newPw.length < 10) {
      setPwMsg({ kind: 'err', text: 'הסיסמה חייבת לפחות 10 תווים' });
      return;
    }
    setSavingPw(true);
    setPwMsg(null);
    try {
      const r = await apiFetch('/api/auth/change_password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ old_password: oldPw, new_password: newPw }),
      });
      if (!r.ok) throw new Error((await r.json()).detail?.message || 'שינוי נכשל');
      const data = await r.json();
      setPwMsg({
        kind: 'ok',
        text: data.other_sessions_revoked > 0
          ? `הסיסמה הוחלפה. ${data.other_sessions_revoked} סשנים אחרים נותקו.`
          : 'הסיסמה הוחלפה ✓',
      });
      setOldPw(''); setNewPw(''); setNewPw2('');
      // Reload sessions
      apiFetch('/api/auth/sessions')
        .then(r => r.json()).then(setSessions).catch(() => {});
    } catch (err) {
      setPwMsg({ kind: 'err', text: err.message });
    } finally {
      setSavingPw(false);
    }
  };

  const revokeSession = async (sessionPrefix) => {
    if (!confirm('לנתק את המכשיר הזה?')) return;
    try {
      const id = sessionPrefix.replace('…', '');
      await apiFetch(`/api/auth/sessions/${encodeURIComponent(id)}`, {
        method: 'DELETE',
      });
      setSessions(prev => prev.filter(s => s.id !== sessionPrefix));
    } catch (err) {
      alert('ניתוק נכשל: ' + err.message);
    }
  };

  const fmtDate = (iso) => new Date(iso).toLocaleString('he-IL', {
    dateStyle: 'short', timeStyle: 'short',
  });

  const parseDevice = (ua) => {
    if (!ua) return 'לא ידוע';
    if (/iPhone/i.test(ua)) return 'iPhone';
    if (/iPad/i.test(ua)) return 'iPad';
    if (/Android/i.test(ua)) return 'Android';
    if (/Mac/i.test(ua)) return 'Mac';
    if (/Windows/i.test(ua)) return 'Windows';
    if (/Linux/i.test(ua)) return 'Linux';
    return ua.slice(0, 30);
  };

  return (
    <div className="fade-in" style={{ padding: '32px 40px 60px', maxWidth: 720, margin: '0 auto' }}>
      <h1 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 4px' }}>
        החשבון שלי
      </h1>
      <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginBottom: 22 }}>
        ניהול הפרופיל, הסיסמה והסשנים הפעילים
      </div>

      {/* Identity card */}
      <Surface style={{ marginBottom: 14, padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14, background: 'var(--ink)',
            color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 24, fontWeight: 700,
          }}>{(u.name || u.email || '?')[0].toUpperCase()}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 600 }}>{u.name}</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>{u.email}</div>
          </div>
          {u.is_admin && (
            <span style={{
              fontSize: 10.5, padding: '3px 9px', borderRadius: 4,
              background: 'rgba(10,132,255,0.12)', color: 'var(--accent)', fontWeight: 600,
            }}>אדמין</span>
          )}
        </div>

        <form onSubmit={saveName}>
          <Field label="שם תצוגה">
            <input value={name} onChange={e => setName(e.target.value)}
              required style={inpStyle} />
          </Field>
          {nameMsg && (
            <div style={{
              padding: '8px 12px', borderRadius: 8, fontSize: 12, marginBottom: 10,
              background: nameMsg.kind === 'ok' ? 'rgba(48,164,108,0.1)' : 'rgba(216,58,58,0.1)',
              color: nameMsg.kind === 'ok' ? 'var(--positive)' : 'var(--alert)',
            }}>{nameMsg.text}</div>
          )}
          <button type="submit" disabled={savingName || !name.trim() || name.trim() === u.name} style={{
            padding: '8px 16px', borderRadius: 9,
            background: 'var(--ink)', color: 'var(--bg)', border: 'none',
            cursor: savingName ? 'wait' : 'pointer', fontSize: 13, fontWeight: 600,
            opacity: (!name.trim() || name.trim() === u.name) ? 0.4 : 1,
          }}>{savingName ? 'שומר…' : 'שמור שם'}</button>
        </form>
      </Surface>

      {/* Change password */}
      <Surface style={{ marginBottom: 14, padding: 24 }}>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>שינוי סיסמה</div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginBottom: 16 }}>
          מינימום 10 תווים. לאחר ההחלפה — סשנים פתוחים במכשירים אחרים יופסקו.
        </div>
        <form onSubmit={changePw}>
          <Field label="סיסמה נוכחית">
            <input type="password" value={oldPw} onChange={e => setOldPw(e.target.value)}
              autoComplete="current-password" required style={inpStyle} />
          </Field>
          <Field label="סיסמה חדשה">
            <input type="password" value={newPw} onChange={e => setNewPw(e.target.value)}
              autoComplete="new-password" required minLength={10} style={inpStyle} />
          </Field>
          <Field label="אישור סיסמה חדשה">
            <input type="password" value={newPw2} onChange={e => setNewPw2(e.target.value)}
              autoComplete="new-password" required minLength={10} style={inpStyle} />
          </Field>
          {pwMsg && (
            <div style={{
              padding: '10px 12px', borderRadius: 8, fontSize: 12, marginBottom: 10,
              background: pwMsg.kind === 'ok' ? 'rgba(48,164,108,0.1)' : 'rgba(216,58,58,0.1)',
              color: pwMsg.kind === 'ok' ? 'var(--positive)' : 'var(--alert)',
            }}>{pwMsg.text}</div>
          )}
          <button type="submit" disabled={savingPw} style={{
            padding: '8px 16px', borderRadius: 9,
            background: 'var(--ink)', color: 'var(--bg)', border: 'none',
            cursor: savingPw ? 'wait' : 'pointer', fontSize: 13, fontWeight: 600,
          }}>{savingPw ? 'משנה…' : 'החלף סיסמה'}</button>
        </form>
      </Surface>

      {/* Active sessions */}
      <Surface padded={false}>
        <div style={{ padding: '20px 24px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>סשנים פעילים</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 2 }}>
              מכשירים מחוברים כרגע. תוכל לנתק כל אחד מהם.
            </div>
          </div>
          <span style={{ fontSize: 11, color: 'var(--ink-soft)' }}>{sessions.length} פעילים</span>
        </div>
        {loadingSessions ? (
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--ink-soft)', fontSize: 12 }}>טוען…</div>
        ) : sessions.length === 0 ? (
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--ink-soft)', fontSize: 12 }}>אין סשנים פעילים.</div>
        ) : (
          sessions.map((s, i) => (
            <div key={s.id} style={{
              padding: '14px 24px', display: 'flex', alignItems: 'center', gap: 12,
              borderTop: '0.5px solid var(--rule)',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8, background: 'var(--bg-deep)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14,
              }}>💻</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 7 }}>
                  {parseDevice(s.user_agent)}
                  {s.is_current && (
                    <span style={{
                      fontSize: 9.5, padding: '2px 6px', borderRadius: 4,
                      background: 'rgba(48,164,108,0.15)', color: 'var(--positive)', fontWeight: 600,
                    }}>זה המכשיר הנוכחי</span>
                  )}
                </div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-soft)', fontFamily: 'var(--font-mono)' }}>
                  {s.ip_address} · נכנס {fmtDate(s.created_at)} · פג תוקף {fmtDate(s.expires_at)}
                </div>
              </div>
              {!s.is_current && (
                <button onClick={() => revokeSession(s.id)} style={{
                  padding: '5px 10px', borderRadius: 7,
                  background: 'transparent', color: 'var(--alert)',
                  border: '0.5px solid rgba(216,58,58,0.3)',
                  cursor: 'pointer', fontSize: 11, fontWeight: 500,
                }}>נתק</button>
              )}
            </div>
          ))
        )}
      </Surface>
    </div>
  );
}

window.ProfilePage = ProfilePage;