/* eslint-disable */
// יפן 2026 — shared login screen (Phase 3, DL-003). Design pulled from Claude Design
// project "יפן 2026 Design System" (templates/login/Login.dc.html, 2026-07-15).
//
// One shared account for both travellers ("משה & ליעוז") — password only, no email field.
// Supabase Auth still requires an identifier internally, so SHARED_EMAIL below is a fixed,
// non-secret placeholder (per docs/plan/01-architecture.md: "the email needn't be a real
// mailbox") — not a credential, never shown to the user, safe to keep in source. The same
// address is used when the shared auth user is created server-side (DL-003 Phase D step 3).
// Password stays LTR-isolated (dir="ltr") per the brand RTL rules. supabase-js persists the
// session (localStorage) so this screen shows once per device — see index.html's auth gate.
;(function(){
  const { useState } = React;
  const ASSET_W = './assets';
  const SHARED_EMAIL = 'trip@japan2026.local';

  function JP2026Login({ onSignedIn }) {
    const [show, setShow] = useState(false);
    const [pw, setPw] = useState('');
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState('');

    const submit = async () => {
      if (!pw || busy) return;
      setBusy(true); setErr('');
      const { error } = await window.JP2026Supabase.auth.signInWithPassword({ email: SHARED_EMAIL, password: pw });
      setBusy(false);
      if (error) { setErr('סיסמה שגויה, נסו שוב'); return; }
      if (onSignedIn) onSignedIn();
    };

    const revealHint = err || (show ? 'הסיסמה גלויה — לחצו 🙈 כדי להסתיר' : '');

    return (
      <div style={{ minHeight:'100%', display:'flex', flexDirection:'column', alignItems:'center',
        textAlign:'center', padding:'8px 28px 28px' }}>

        <img src={`${ASSET_W}/chibi/chibi-wave.png`} alt="משה וליעוז מברכים לשלום"
          style={{ width:200, height:'auto', marginTop:10, borderRadius:'var(--r-lg)' }} />

        <h1 style={{ fontFamily:'var(--font-display)', fontSize:58, lineHeight:0.82, color:'var(--ink-900)', margin:'6px 0 0' }}>
          טוב שחזרתם
        </h1>
        <div style={{ fontFamily:'var(--font-ui)', fontSize:15, color:'var(--ink-700)', marginTop:8 }}>
          המסע שלנו מחכה בפנים ⛩️
        </div>

        {/* shared account identity */}
        <div style={{ display:'flex', alignItems:'center', gap:12, width:'100%', marginTop:26,
          padding:'12px 16px', background:'var(--surface-card)', border:'1.5px solid var(--hairline)',
          borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)' }}>
          <div style={{ width:44, height:44, flex:'0 0 auto', borderRadius:'var(--r-pill)',
            background:'var(--city-tokyo-tint)', display:'grid', placeItems:'center', fontSize:22 }}>⛩️</div>
          <div style={{ textAlign:'start', lineHeight:1.3 }}>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:16, color:'var(--ink-900)' }}>משה &amp; ליעוז</div>
            <div style={{ fontFamily:'var(--font-ui)', fontSize:12.5, color:'var(--ink-500)' }}>החשבון המשותף שלנו</div>
          </div>
          <span style={{ marginInlineStart:'auto', fontSize:18 }} aria-hidden="true">✓</span>
        </div>

        {/* shared password */}
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', width:'100%', margin:'18px 0 8px' }}>
          <span style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--ink-500)' }}>הסיסמה שלנו</span>
          <a href="#" onClick={(e)=>e.preventDefault()} style={{ fontFamily:'var(--font-ui)', fontSize:13, color:'var(--blossom-deep)' }}>שכחנו 🙈</a>
        </div>

        <div style={{ position:'relative', width:'100%' }}>
          <input
            type={show ? 'text' : 'password'} value={pw} dir="ltr" autoComplete="current-password"
            placeholder="••••••••"
            onChange={(e)=>setPw(e.target.value)}
            onKeyDown={(e)=>{ if (e.key === 'Enter') submit(); }}
            style={{ width:'100%', boxSizing:'border-box', height:56, padding:'0 58px 0 18px',
              textAlign:'left', fontFamily:'var(--font-ui)', fontSize:18, color:'var(--ink-900)',
              background:'var(--surface-card)', border:'1.5px solid var(--hairline)',
              borderRadius:'var(--r-lg)', outline:'none', boxShadow:'var(--shadow-sm)', direction:'ltr' }}
          />
          <button type="button" onClick={()=>setShow(s=>!s)} aria-label="הצג או הסתר סיסמה"
            style={{ position:'absolute', insetInlineStart:8, top:'50%', transform:'translateY(-50%)',
              width:42, height:42, display:'grid', placeItems:'center', border:'none',
              background:'transparent', borderRadius:'var(--r-md)', cursor:'pointer', fontSize:22, lineHeight:1 }}>
            {show ? '🙈' : '👁️'}
          </button>
        </div>
        <div style={{ alignSelf:'flex-start', marginTop:8, fontFamily:'var(--font-ui)', fontSize:12.5,
          color: err ? 'var(--vegan-none, #c0392b)' : 'var(--ink-500)', minHeight:18 }}>
          {revealHint}
        </div>

        <button type="button" onClick={submit} disabled={busy} style={{
          appearance:'none', border:'none', marginTop:22, width:'100%', padding:17,
          borderRadius:'var(--r-lg)', background:'var(--ink-900)', color:'var(--paper-cream)',
          fontFamily:'var(--font-ui)', fontSize:17, cursor: busy ? 'default' : 'pointer',
          opacity: busy ? 0.7 : 1, boxShadow:'var(--shadow-card)',
          display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
          {busy ? 'מתחברים…' : 'כניסה למסע'} {!busy && <span aria-hidden="true">←</span>}
        </button>

        <div style={{ fontFamily:'var(--font-ui)', fontSize:12, color:'var(--ink-500)', marginTop:16 }}>
          אפליקציה פרטית · משה &amp; ליעוז
        </div>
      </div>
    );
  }

  window.JP2026Login = JP2026Login;
})();