/* screen-auth-forgot.jsx — Recovery flow (Google-only auth) */
/* global React, Icon, useT, LOCALES */

function ScreenAuthForgot({ onDone }) {
  const [step, setStep] = React.useState('enter'); // 'enter' | 'sent'
  const [email, setEmail] = React.useState('linh@brand.co');
  const { t, locale } = useT();
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (step === 'enter' && inputRef.current) inputRef.current.focus();
  }, [step]);

  return (
    <div className="screen" style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr 1fr', background: 'white' }}>

      <ForgotVisualPanel step={step} />

      <div style={{ display: 'grid', placeItems: 'center', padding: '40px 32px', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 24, right: 24, zIndex: 5 }}>
          <ForgotLangSwitcher />
        </div>

        <div style={{ width: '100%', maxWidth: 420 }}>
          {/* Brand mark */}
          <div className="row items-center gap-8 mb-6">
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'linear-gradient(135deg, #009CFF, #1C1CC9)',
              color: 'white', fontWeight: 800, display: 'grid', placeItems: 'center',
              fontFamily: 'Space Grotesk', fontSize: 18,
              boxShadow: '0 6px 16px rgba(28,28,201,0.4)'
            }}>P</div>
            <div>
              <div className="font-display bold" style={{ fontSize: 17, lineHeight: 1 }}>Prime Influencer</div>
              <div className="muted" style={{ fontSize: 11 }}>{t('auth.poweredBy')}</div>
            </div>
          </div>

          {/* back link */}
          <button
            onClick={() => onDone?.('back')}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'transparent', border: 0, padding: 0,
              color: 'var(--ink-soft)', fontSize: 12, fontWeight: 700,
              cursor: 'pointer', fontFamily: 'inherit', marginBottom: 16,
              letterSpacing: '0.02em'
            }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6" /></svg>
            {t('forgot.back')}
          </button>

          {step === 'enter' && (
            <div key={locale + 'enter'} style={{ animation: 'authFade .35s ease-out' }}>
              <h1 className="font-display" style={{ fontSize: 34, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 10px' }}>
                {t('forgot.title')}
              </h1>
              <p className="muted" style={{ fontSize: 14, margin: 0, lineHeight: 1.55 }}>
                {t('forgot.subtitle')}
              </p>

              <form onSubmit={(e) => { e.preventDefault(); setStep('sent'); }} style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div>
                  <label className="label">{t('forgot.emailLabel')}</label>
                  <input
                    ref={inputRef}
                    className="input"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="you@brand.com"
                    autoComplete="email"
                    required />
                </div>
                <button type="submit" className="btn btn-primary" style={{ marginTop: 4, width: '100%' }}>
                  {t('forgot.send')} {Icon.arrow}
                </button>
              </form>

              {/* tips card */}
              <div style={{
                marginTop: 24,
                padding: 16,
                background: 'var(--bg-soft, #F5F7FA)',
                border: '1px solid var(--line)',
                borderRadius: 14
              }}>
                <div className="row items-center gap-6" style={{ marginBottom: 10 }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 6,
                    background: 'var(--yellow)', display: 'grid', placeItems: 'center',
                    color: 'var(--ink)'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a7 7 0 0 0-4 12.74V18a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3.26A7 7 0 0 0 12 2Zm-2 19a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h-4v1Z" /></svg>
                  </span>
                  <div className="bold" style={{ fontSize: 12, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{t('forgot.tipsTitle')}</div>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[t('forgot.tip1'), t('forgot.tip2'), t('forgot.tip3')].map((tip, i) => (
                    <li key={i} className="row items-start gap-8" style={{ fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                      <span style={{
                        flexShrink: 0, marginTop: 4,
                        width: 6, height: 6, borderRadius: 999,
                        background: 'var(--cyan)'
                      }} />
                      <span>{tip}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}

          {step === 'sent' && (
            <div key={locale + 'sent'} style={{ animation: 'authFade .35s ease-out' }}>
              {/* big check */}
              <div style={{
                width: 64, height: 64, borderRadius: 18,
                background: 'linear-gradient(135deg, #79FEE7, #1FD6B4)',
                display: 'grid', placeItems: 'center',
                marginBottom: 18,
                boxShadow: '0 12px 28px rgba(31,214,180,0.32)'
              }}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 12.5 9 17.5 20 6.5" />
                </svg>
              </div>

              <h1 className="font-display" style={{ fontSize: 34, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 10px' }}>
                {t('forgot.sentTitle')}
              </h1>
              <ForgotSentBody email={email} />

              {/* email pill display */}
              <div className="row items-center gap-10" style={{
                marginTop: 18,
                padding: '12px 14px',
                background: 'var(--bg-soft, #F5F7FA)',
                border: '1px dashed var(--line)',
                borderRadius: 12
              }}>
                <span style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: 'white', border: '1px solid var(--line)',
                  display: 'grid', placeItems: 'center', color: 'var(--cyan-dark)'
                }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-soft)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t('forgot.emailLabel')}</div>
                  <div className="bold tabular" style={{ fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{email}</div>
                </div>
                <button
                  onClick={() => setStep('enter')}
                  style={{
                    background: 'transparent', border: 0, padding: 0,
                    color: 'var(--cyan-dark)', fontSize: 11, fontWeight: 700,
                    cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap'
                  }}>
                  {t('forgot.changeEmail')}
                </button>
              </div>

              <div className="row gap-8 mt-6">
                <button
                  onClick={() => onDone?.('back')}
                  className="btn btn-primary"
                  style={{ flex: 1 }}>
                  {t('forgot.back')}
                </button>
                <button
                  onClick={() => { /* simulate resend */ }}
                  className="btn btn-ghost"
                  style={{ flex: 1 }}>
                  {t('forgot.resend')}
                </button>
              </div>

              {/* simulated inbox preview */}
              <InboxPreview email={email} />
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes authFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
}

/* Helper to inject the email into the sentBody string with {email} placeholder */
function ForgotSentBody({ email }) {
  const { t } = useT();
  const raw = t('forgot.sentBody', { email: '\u0000EMAIL\u0000' });
  const parts = raw.split('\u0000EMAIL\u0000');
  return (
    <p className="muted" style={{ fontSize: 14, margin: 0, lineHeight: 1.55 }}>
      {parts[0]}
      <span className="bold" style={{ color: 'var(--ink)' }}>{email}</span>
      {parts[1]}
    </p>
  );
}

/* Inline language switcher (same shape as auth screen's) */
function ForgotLangSwitcher() {
  const { locale } = useT();
  const [open, setOpen] = React.useState(false);
  const cur = LOCALES.find(l => l.code === locale) || LOCALES[0];
  const setLocale = (code) => { if (window.__setLocale) window.__setLocale(code); setOpen(false); };
  return (
    <div style={{ position: 'relative' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          background: 'white', border: '1px solid var(--line)',
          borderRadius: 999, padding: '8px 12px 8px 10px',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 12, fontWeight: 700, fontFamily: 'inherit',
          cursor: 'pointer', color: 'var(--ink)',
          boxShadow: '0 2px 8px rgba(0,43,80,0.06)'
        }}>
        <span aria-hidden="true" style={{ fontSize: 14, lineHeight: 1 }}>{cur.flag}</span>
        <span style={{ letterSpacing: '0.04em' }}>{cur.code.toUpperCase()}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }}><path d="m6 9 6 6 6-6" /></svg>
      </button>
      {open && (
        <>
          <div style={{ position: 'fixed', inset: 0, zIndex: 50 }} onClick={() => setOpen(false)} />
          <div style={{
            position: 'absolute', top: 'calc(100% + 8px)', right: 0,
            background: 'white', borderRadius: 14,
            boxShadow: '0 18px 40px rgba(0,43,80,0.18)',
            border: '1px solid var(--line)',
            minWidth: 220, padding: 6, zIndex: 51
          }}>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--ink-soft)', padding: '6px 10px 4px', textTransform: 'uppercase' }}>
              Language / Ngôn ngữ / Bahasa
            </div>
            {LOCALES.map(l => (
              <button key={l.code} onClick={() => setLocale(l.code)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  width: '100%', padding: '10px 10px',
                  border: 0, background: l.code === locale ? 'var(--bg-soft, #F5F7FA)' : 'transparent',
                  borderRadius: 10, fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', textAlign: 'left', color: 'var(--ink)',
                  fontFamily: 'inherit'
                }}>
                <span aria-hidden="true" style={{ fontSize: 18 }}>{l.flag}</span>
                <span style={{ flex: 1 }}>{l.label}</span>
                <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--ink-soft)', letterSpacing: '0.06em' }}>{l.code.toUpperCase()}</span>
                {l.code === locale && (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--cyan-dark)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
                )}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

/* Faux inbox preview that appears under the 'sent' state */
function InboxPreview({ email }) {
  const { t } = useT();
  return (
    <div style={{
      marginTop: 28,
      borderRadius: 14,
      background: 'white',
      border: '1px solid var(--line)',
      boxShadow: '0 12px 30px rgba(0,43,80,0.06)',
      overflow: 'hidden',
      animation: 'inboxRise .8s ease-out .2s both'
    }}>
      <div className="row items-center gap-6" style={{
        padding: '10px 14px',
        background: 'var(--bg-soft, #F5F7FA)',
        borderBottom: '1px solid var(--line)',
        fontSize: 11, fontWeight: 700, color: 'var(--ink-soft)', letterSpacing: '0.06em', textTransform: 'uppercase'
      }}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>
        Inbox · {email.split('@')[1] || 'mail.com'}
      </div>
      <div style={{ padding: '14px' }}>
        <div className="row items-start gap-10">
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'linear-gradient(135deg, #009CFF, #1C1CC9)',
            color: 'white', fontWeight: 800, display: 'grid', placeItems: 'center',
            fontFamily: 'Space Grotesk', fontSize: 16, flexShrink: 0
          }}>P</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="row items-center gap-8" style={{ justifyContent: 'space-between' }}>
              <div className="bold" style={{ fontSize: 13 }}>Prime Influencer</div>
              <div style={{ fontSize: 10, color: 'var(--ink-soft)' }}>just now</div>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink)', marginTop: 2 }}>
              {t('forgot.title')} — Prime Influencer
            </div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 4, lineHeight: 1.45 }}>
              {t('forgot.subtitle').slice(0, 80)}…
            </div>
            <div className="row gap-6" style={{ marginTop: 10 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 10px', borderRadius: 999,
                background: 'var(--ink)', color: 'white',
                fontSize: 11, fontWeight: 700
              }}>
                {t('forgot.send')}
              </span>
              <span className="muted" style={{ fontSize: 10, alignSelf: 'center' }}>30 min</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes inboxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
}

/* Visual / poetic panel — different from sign-in: focused on safety */
function ForgotVisualPanel({ step }) {
  const { t } = useT();
  return (
    <div style={{
      background: 'linear-gradient(160deg, #1C1CC9 0%, #002B50 60%, #001a30 100%)',
      color: 'white',
      position: 'relative',
      overflow: 'hidden',
      padding: '60px 56px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
    }}>
      {/* concentric pulse rings */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {[0, 1, 2, 3].map(i => (
          <div key={i} style={{
            position: 'absolute',
            top: '50%', left: '50%',
            width: 200 + i * 160, height: 200 + i * 160,
            border: '1px solid rgba(121,254,231,' + (0.3 - i * 0.06) + ')',
            borderRadius: '50%',
            transform: 'translate(-50%, -50%)',
            animation: `ringPulse 6s ease-in-out ${i * 0.4}s infinite`
          }} />
        ))}
      </div>

      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(255,255,255,0.16)',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.04em'
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#79FEE7" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" /></svg>
          {t('forgot.heroBadge')}
        </div>
        <h2 className="font-display" style={{ fontSize: 40, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, marginTop: 16, marginBottom: 0 }}>
          {t('forgot.title')}
          <br />
          <span style={{
            background: 'linear-gradient(90deg, #79FEE7, #FEE960)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
          }}>{t('forgot.heroAccent')}</span>
        </h2>
      </div>

      {/* Center: animated lock/check vault */}
      <div style={{ position: 'relative', zIndex: 1, display: 'grid', placeItems: 'center', padding: '40px 0' }}>
        <div style={{
          width: 220, height: 220, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(121,254,231,0.18), transparent 70%)',
          display: 'grid', placeItems: 'center',
          position: 'relative'
        }}>
          <div style={{
            position: 'absolute', inset: 30,
            border: '2px dashed rgba(121,254,231,0.4)', borderRadius: '50%',
            animation: 'slowSpin 24s linear infinite'
          }} />
          <div style={{
            width: 110, height: 110, borderRadius: 28,
            background: 'rgba(255,255,255,0.06)',
            backdropFilter: 'blur(16px)',
            border: '1px solid rgba(255,255,255,0.18)',
            display: 'grid', placeItems: 'center',
            boxShadow: '0 20px 60px rgba(0,0,0,0.25)'
          }}>
            {step === 'sent' ? (
              <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#79FEE7" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{ filter: 'drop-shadow(0 0 12px rgba(121,254,231,0.6))' }}>
                <path d="M4 12.5 9 17.5 20 6.5" />
              </svg>
            ) : (
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#79FEE7" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ filter: 'drop-shadow(0 0 12px rgba(121,254,231,0.5))' }}>
                <rect x="5" y="11" width="14" height="10" rx="2" />
                <path d="M8 11V7a4 4 0 0 1 8 0v4" />
                <circle cx="12" cy="16" r="1.4" fill="#79FEE7" />
              </svg>
            )}
          </div>
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 16,
          padding: 16,
          display: 'flex', flexDirection: 'column', gap: 10
        }}>
          {[
            { c: '#79FEE7', label: t('forgot.proof1') },
            { c: '#FEE960', label: t('forgot.proof2') },
            { c: '#FF6FA3', label: t('forgot.proof3') }
          ].map((row, i) => (
            <div key={i} className="row items-center gap-10" style={{ fontSize: 13 }}>
              <span style={{
                width: 18, height: 18, borderRadius: 6,
                background: row.c, opacity: 0.25,
                display: 'grid', placeItems: 'center', position: 'relative', flexShrink: 0
              }}>
                <span style={{
                  position: 'absolute', inset: 4,
                  background: row.c, borderRadius: 3
                }} />
              </span>
              <span style={{ color: 'rgba(255,255,255,0.86)' }}>{row.label}</span>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes ringPulse { 0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.04); } }
        @keyframes slowSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

Object.assign(window, { ScreenAuthForgot });