// GetContent — "Mijn profiel / account": eenvoudige bewerkbare gegevens +
// opgeslagen-bevestiging en uitloggen. Front-end only (bewaart naam in de sessie).
function Account({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Input, Button } = NS;
  const s = window.useStore();
  const auth = s.auth;
  const [name, setName] = React.useState(auth ? auth.name : '');
  const [saved, setSaved] = React.useState(false);
  if (!auth) return null;
  const role = auth.role;

  const save = (e) => {
    e.preventDefault();
    window.GC_STORE.set((st) => ({ auth: Object.assign({}, st.auth, { name: name || st.auth.name }) }));
    setSaved(true);
    setTimeout(() => setSaved(false), 2200);
  };

  return (
    <window.AppPage eyebrow="Account" title="Mijn profiel" subtitle="Beheer je gegevens en je account." maxWidth="620px">
      <form onSubmit={save} className="gc-form-card" style={{ marginBottom: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 4 }}>
          <span style={{ display: 'inline-flex', width: 52, height: 52, flex: 'none', borderRadius: '50%', alignItems: 'center', justifyContent: 'center', background: 'var(--accent-tint)', color: 'var(--accent-press)', fontSize: 18, fontWeight: 'var(--fw-bold)' }}>
            {name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase()}
          </span>
          <div>
            <div style={{ fontSize: 16, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{name}</div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)', textTransform: 'capitalize' }}>{role}</div>
          </div>
        </div>

        <Input label="Naam" value={name} onChange={(e) => setName(e.target.value)} placeholder="Je naam" />
        <Input label="E-mailadres" type="email" placeholder="jij@email.nl" icon={<i data-lucide="mail"></i>} />
        {role === 'creator'
          ? <Input label="Plaats" placeholder="Bijv. Amsterdam" icon={<i data-lucide="map-pin"></i>} />
          : <Input label="Bedrijfsnaam" placeholder="Bijv. Bloom Skincare" icon={<i data-lucide="building-2"></i>} />}

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 4 }}>
          <Button type="submit" variant="primary" size="lg" iconRight={<i data-lucide="check"></i>}>Opslaan</Button>
          {saved && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 'var(--fw-semibold)', color: '#2f7f5b' }}><i data-lucide="check-circle" style={{ width: 16, height: 16 }}></i>Opgeslagen</span>}
        </div>
      </form>

      <div className="gc-form-card" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <div>
          <div style={{ fontSize: 15, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>Uitloggen</div>
          <div style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>Je wordt afgemeld op dit apparaat.</div>
        </div>
        <Button variant="ghost" onClick={() => { window.GC_STORE.logout(); onNav('home'); }}>Uitloggen</Button>
      </div>
    </window.AppPage>
  );
}
window.Account = Account;