// MLuppens Website — Online Album (private, password-gated)
// Hidden from main nav; reachable only via the footer "Online Album" link.

const OA_P = 'assets/photos/portfolio/';

// Demo galleries — Marieke would manage these in production.
// Each gallery has a name, a password, a cover, and a set of photos.
const PRIVATE_GALLERIES = {
  'rianne-thijs': {
    couple: 'Rianne & Thijs',
    password: 'rianne2025',
    coverImage: OA_P + '4U4A1402.jpg',
    coverPos: 'center 35%',
    date: 'May 2025',
    dateNl: 'Mei 2025',
    location: 'Amsterdam',
    locationNl: 'Amsterdam',
    note: 'Your day, gently kept. — With love, Marieke',
    noteNl: 'Jullie dag, zacht bewaard. — Liefs, Marieke',
    photos: [
      OA_P + '4U4A1402.jpg', OA_P + '4U4A1551n.jpg', OA_P + '4U4A1554-3n.jpg',
      OA_P + '4U4A1116n.jpg', OA_P + '4U4A1170n.jpg', OA_P + '4U4A1579n.jpg',
      OA_P + '4U4A2533zw.jpg', OA_P + '4U4A8076n.jpg', OA_P + '4U4A1648n.jpg',
    ],
  },
  'anne-mathijs': {
    couple: 'Anne & Mathijs',
    password: 'anne2024',
    coverImage: OA_P + '4U4A9990n.jpg',
    coverPos: 'center 40%',
    date: 'August 2024',
    dateNl: 'Augustus 2024',
    location: 'A summer day',
    locationNl: 'Een zomerse dag',
    note: 'For Anne and Mathijs — every quiet moment in one place.',
    noteNl: 'Voor Anne en Mathijs — elk stil moment op één plek.',
    photos: [
      OA_P + '4U4A9990n.jpg', OA_P + '4U4A6644n.jpg', OA_P + '4U4A6304n.jpg',
      OA_P + '4U4A8888nn.jpg', OA_P + '4U4A9540n.jpg', OA_P + '4U4A9644.jpg',
      OA_P + '4U4A6683zw.jpg', OA_P + '4U4A7290n.jpg', OA_P + '4U4A7637n.jpg',
    ],
  },
};


function OnlineAlbumScreen() {
  const t = useT();
  const lang = useLang();
  const [code, setCode] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [unlocked, setUnlocked] = React.useState(null); // gallery object once unlocked
  const [lightboxIdx, setLightboxIdx] = React.useState(null);

  const onSubmit = (e) => {
    e.preventDefault();
    const key = code.trim().toLowerCase();
    const g = PRIVATE_GALLERIES[key];
    if (!g) {
      setError(t(
        "That gallery code isn't recognised. Please check the email I sent you.",
        'Deze galerijcode wordt niet herkend. Controleer de e-mail die ik je stuurde.'
      ));
      return;
    }
    if (g.password !== password.trim()) {
      setError(t(
        "The password doesn't match. Please try again or write me a quick note.",
        'Het wachtwoord klopt niet. Probeer het opnieuw of stuur me een kort bericht.'
      ));
      return;
    }
    setUnlocked(g);
    setError('');
  };

  React.useEffect(() => {
    function onKey(e) {
      if (lightboxIdx === null || !unlocked) return;
      if (e.key === 'Escape') setLightboxIdx(null);
      if (e.key === 'ArrowRight') setLightboxIdx((i) => Math.min(i + 1, unlocked.photos.length - 1));
      if (e.key === 'ArrowLeft') setLightboxIdx((i) => Math.max(i - 1, 0));
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightboxIdx, unlocked]);

  // ── UNLOCKED GALLERY VIEW ──────────────────────────────
  if (unlocked) {
    return (
      <>
        {/* Cover */}
        <section style={{ position: 'relative', minHeight: '76vh', overflow: 'hidden', display: 'flex', alignItems: 'flex-end' }}>
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: `url(${unlocked.coverImage})`,
            backgroundSize: 'cover', backgroundPosition: unlocked.coverPos || 'center',
          }}></div>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to bottom, rgba(26,24,22,.2) 0%, rgba(26,24,22,0) 40%, rgba(26,24,22,.7) 100%)',
          }}></div>
          <div style={{ position: 'relative', zIndex: 1, padding: '80px 40px', color: 'var(--linen)', maxWidth: 'var(--max-w)', margin: '0 auto', width: '100%' }}>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.42em', textTransform: 'uppercase', opacity: 0.85, marginBottom: 20 }}>{t('Private album', 'Privé-album')}</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(48px, 8vw, 128px)', lineHeight: 0.96, letterSpacing: '-0.02em', margin: 0, color: 'var(--linen)' }}>
              {unlocked.couple}
            </h1>
            <div style={{ marginTop: 24, display: 'flex', gap: 32, alignItems: 'baseline', flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(242,237,229,.85)' }}>{lang === 'NL' && unlocked.dateNl ? unlocked.dateNl : unlocked.date}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(242,237,229,.85)' }}>· {lang === 'NL' && unlocked.locationNl ? unlocked.locationNl : unlocked.location}</span>
            </div>
          </div>
        </section>

        {/* Note */}
        <section className="section">
          <div className="container narrow" style={{ textAlign: 'center' }}>
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.5, color: 'var(--ink)', margin: 0 }}>
              "{lang === 'NL' && unlocked.noteNl ? unlocked.noteNl : unlocked.note}"
            </p>
            <Rule className="center" />
          </div>
        </section>

        {/* Editorial gallery — mixed aspect, like RealWeddingScreen */}
        <section style={{ padding: '0 40px 96px' }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 10 }}>
              {unlocked.photos.map((src, i) => {
                const isWide = i % 4 === 0;
                const span = isWide ? 6 : 2;
                const aspect = isWide ? '21/9' : '3/4';
                return (
                  <div
                    key={i}
                    style={{ gridColumn: `span ${span}`, aspectRatio: aspect, cursor: 'pointer', overflow: 'hidden', background: 'var(--ink)' }}
                    onClick={() => setLightboxIdx(i)}
                  >
                    <div style={{
                      width: '100%', height: '100%',
                      backgroundImage: `url(${src})`,
                      backgroundSize: 'cover', backgroundPosition: 'center',
                      transition: 'transform .8s var(--ease)',
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.03)'; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
                    ></div>
                  </div>
                );
              })}
            </div>
            <p className="small" style={{ textAlign: 'center', marginTop: 48, fontStyle: 'italic', color: 'var(--ink-mute)' }}>
              {t(
                'Click any image to view full size. Use the arrow keys to move through the album.',
                'Klik op een beeld voor volledig formaat. Gebruik de pijltjestoetsen om door het album te bewegen.'
              )}
            </p>
          </div>
        </section>

        {/* Signature close */}
        <section style={{ padding: '64px 40px 96px', textAlign: 'center', background: 'var(--linen)' }}>
          <Signature size={72} />
          <p className="small" style={{ marginTop: 24, color: 'var(--ink-mute)', fontStyle: 'italic' }}>
            {t('Your album stays here as long as you want it to.', 'Jullie album blijft hier zolang jullie willen.')}
          </p>
        </section>

        {/* Lightbox */}
        {lightboxIdx !== null && (
          <div
            style={{
              position: 'fixed', inset: 0, zIndex: 200,
              background: 'rgba(26, 24, 22, 0.96)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32,
            }}
            onClick={() => setLightboxIdx(null)}
          >
            <button
              onClick={(e) => { e.stopPropagation(); setLightboxIdx(null); }}
              style={{
                position: 'absolute', top: 24, right: 32, background: 'transparent', border: 0,
                color: 'var(--linen)', fontFamily: 'var(--font-body)', fontSize: 11,
                letterSpacing: '0.32em', textTransform: 'uppercase', cursor: 'pointer', opacity: 0.7,
              }}
            >{t('Close ×', 'Sluiten ×')}</button>
            <button
              onClick={(e) => { e.stopPropagation(); setLightboxIdx((i) => Math.max(i - 1, 0)); }}
              style={{
                position: 'absolute', left: 32, top: '50%', transform: 'translateY(-50%)',
                background: 'transparent', border: 0, color: 'var(--linen)',
                fontSize: 32, cursor: 'pointer', padding: '12px 18px',
                opacity: lightboxIdx === 0 ? 0.2 : 0.7,
              }}
            >←</button>
            <img
              src={unlocked.photos[lightboxIdx]}
              alt=""
              onClick={(e) => e.stopPropagation()}
              style={{ maxHeight: '90vh', maxWidth: '90vw', objectFit: 'contain' }}
            />
            <button
              onClick={(e) => { e.stopPropagation(); setLightboxIdx((i) => Math.min(i + 1, unlocked.photos.length - 1)); }}
              style={{
                position: 'absolute', right: 32, top: '50%', transform: 'translateY(-50%)',
                background: 'transparent', border: 0, color: 'var(--linen)',
                fontSize: 32, cursor: 'pointer', padding: '12px 18px',
                opacity: lightboxIdx === unlocked.photos.length - 1 ? 0.2 : 0.7,
              }}
            >→</button>
            <div style={{
              position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
              color: 'rgba(242,237,229,.6)', fontFamily: 'var(--font-body)',
              fontSize: 11, letterSpacing: '0.32em',
            }}>{lightboxIdx + 1} / {unlocked.photos.length}</div>
          </div>
        )}
      </>
    );
  }

  // ── PASSWORD ENTRY VIEW ───────────────────────────────
  return (
    <section style={{ minHeight: '88vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '120px 40px 80px', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${OA_P}4U4A1551n.jpg)`,
        backgroundSize: 'cover', backgroundPosition: 'center 20%',
        opacity: 0.18,
      }}></div>
      <div style={{ position: 'relative', maxWidth: 480, width: '100%', textAlign: 'center' }}>
        <Eyebrow>{t('Online Album', 'Online album')}</Eyebrow>
        <h1 className="display" style={{ marginTop: 24, marginBottom: 24, fontSize: 'clamp(40px, 5.5vw, 76px)', letterSpacing: '-0.015em' }}>
          {t(<>A private<br/>door.</>, <>Een privé-<br/>deur.</>)}
        </h1>
        <Rule className="center" />
        <p className="body" style={{ color: 'var(--ink-soft)', marginTop: 28, marginBottom: 44, fontWeight: 300 }}>
          {t(
            'Use the gallery code and password from the email I sent you. The album stays private to you, your family, and anyone you choose to share it with.',
            'Gebruik de galerijcode en het wachtwoord uit de e-mail die ik jullie stuurde. Het album blijft privé voor jullie, jullie familie en iedereen die jullie ervoor uitnodigen.'
          )}
        </p>

        <form onSubmit={onSubmit} style={{ textAlign: 'left' }}>
          <FormField
            label={t('Gallery code', 'Galerijcode')}
            placeholder={t('e.g. rianne-thijs', 'bijv. rianne-thijs')}
            value={code}
            onChange={(e) => setCode(e.target.value)}
          />
          <FormField
            label={t('Password', 'Wachtwoord')}
            type="password"
            placeholder=""
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          {error && (
            <div style={{
              marginTop: 8, marginBottom: 8, padding: '12px 14px',
              background: 'rgba(92, 34, 48, 0.08)',
              fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--velvet)',
              fontStyle: 'italic',
            }}>{error}</div>
          )}
          <div style={{ marginTop: 28 }}>
            <button type="submit" className="btn" style={{ width: '100%', justifyContent: 'center' }}>{t('Open Album', 'Open album')}</button>
          </div>
        </form>

        <p className="small" style={{ marginTop: 36, fontStyle: 'italic', color: 'var(--ink-mute)' }}>
          {t('Lost your details? Send me a quick note at', 'Gegevens kwijt? Stuur me een bericht via')} <a href="mailto:mluppensfotografie@gmail.com" style={{ color: 'var(--ink)', borderBottom: '1px solid var(--hair)', textDecoration: 'none' }}>mluppensfotografie@gmail.com</a>.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { OnlineAlbumScreen, PRIVATE_GALLERIES });