// GetContent — wachtwoord vergeten / opnieuw instellen (via Supabase).
// ForgotPage: vraag een reset-link aan. ResetPage: kies een nieuw wachtwoord
// (getoond nadat de gebruiker op de link in de mail heeft geklikt).

function ForgotPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Input, Button } = NS;
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    setError(''); setLoading(true);
    const res = await window.GC_STORE.resetPasswordForEmail(email);
    setLoading(false);
    if (res && res.error) { setError(res.error); return; }
    setSent(true);
  };

  if (sent) {
    return (
      <main>
        <PageHero
          eyebrow="Wachtwoord vergeten"
          title="Check je e-mail"
          lead={'Als er een account bestaat met ' + email + ', hebben we een link gestuurd om je wachtwoord opnieuw in te stellen.'}
          primary={{ label: 'Terug naar inloggen', to: 'login' }}
          onNav={onNav}
        />
      </main>
    );
  }

  return (
    <main>
      <PageHero
        compact
        eyebrow="Wachtwoord vergeten"
        title="Wachtwoord opnieuw instellen"
        lead="Vul je e-mailadres in, dan sturen we je een link om een nieuw wachtwoord te kiezen."
        onNav={onNav}
      >
        <form onSubmit={submit} className="gc-form-card">
          <Input label="E-mailadres" type="email" required placeholder="jij@email.nl" icon={<i data-lucide="mail"></i>} value={email} onChange={(e) => setEmail(e.target.value)} />
          {error && <p style={{ margin: 0, fontSize: 13.5, fontWeight: 'var(--fw-semibold)', color: 'var(--gc-danger)' }}>{error}</p>}
          <Button type="submit" variant="primary" size="lg" fullWidth disabled={loading} iconRight={<i data-lucide="arrow-right"></i>}>{loading ? 'Bezig…' : 'Stuur reset-link'}</Button>
        </form>
        <p className="gc-hero-foot">
          Weet je het weer? <a onClick={() => onNav('login')}>Terug naar inloggen</a>
        </p>
      </PageHero>
    </main>
  );
}

function ResetPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const [pw, setPw] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [done, setDone] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (pw !== pw2) { setError('De twee wachtwoorden komen niet overeen.'); return; }
    setError(''); setLoading(true);
    const res = await window.GC_STORE.updatePassword(pw);
    setLoading(false);
    if (res && res.error) { setError(res.error); return; }
    setDone(true);
  };

  if (done) {
    return (
      <main>
        <PageHero eyebrow="Gelukt" title="Wachtwoord gewijzigd" lead="Je nieuwe wachtwoord is opgeslagen en je bent nu ingelogd." onNav={onNav}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Button variant="primary" size="lg" className="gc-cta-glow" iconRight={<i data-lucide="arrow-right"></i>}
              onClick={() => { window.GC_STORE.clearRecovery(); onNav('dashboard'); }}>Naar je dashboard</Button>
          </div>
        </PageHero>
      </main>
    );
  }

  return (
    <main>
      <PageHero
        compact
        eyebrow="Wachtwoord opnieuw instellen"
        title="Kies een nieuw wachtwoord"
        lead="Voer hieronder je nieuwe wachtwoord in."
        onNav={onNav}
      >
        <form onSubmit={submit} className="gc-form-card">
          <window.PasswordInput label="Nieuw wachtwoord" required placeholder="Kies een wachtwoord" value={pw} onChange={(e) => setPw(e.target.value)} />
          <window.PasswordInput label="Herhaal wachtwoord" required placeholder="Herhaal je wachtwoord" value={pw2} onChange={(e) => setPw2(e.target.value)} />
          {error && <p style={{ margin: 0, fontSize: 13.5, fontWeight: 'var(--fw-semibold)', color: 'var(--gc-danger)' }}>{error}</p>}
          <Button type="submit" variant="primary" size="lg" fullWidth disabled={loading} iconRight={<i data-lucide="check"></i>}>{loading ? 'Bezig…' : 'Wachtwoord opslaan'}</Button>
        </form>
      </PageHero>
    </main>
  );
}

window.ForgotPage = ForgotPage;
window.ResetPage = ResetPage;