// welcome.jsx — "Who are you today?" identity picker
// Shown on first visit to any device. Stores choice in localStorage.
// Exports: WelcomeScreen, useIdentity

const WHO_KEY = 'our-little-ledger.who';

function useIdentity() {
  const [who, setWhoState] = React.useState(() => localStorage.getItem(WHO_KEY));
  const setWho = (id) => { localStorage.setItem(WHO_KEY, id); setWhoState(id); };
  const clearWho = () => { localStorage.removeItem(WHO_KEY); setWhoState(null); };
  return { who, setWho, clearWho };
}

function WelcomeScreen({ onChoose }) {
  const S = Store.get();
  const [hovered, setHovered] = React.useState(null);

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 300,
      background: 'linear-gradient(160deg, #FFF0F6 0%, #FDECF5 40%, #F5EAFB 100%)',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', padding: '24px',
      animation: 'fade .4s ease',
    }}>
      {/* deco blobs */}
      <div style={{ position:'absolute', top:'-80px', right:'-80px', width:340, height:340, borderRadius:'50%', background:'radial-gradient(circle, #FFD3E680 0%, transparent 70%)', pointerEvents:'none' }} />
      <div style={{ position:'absolute', bottom:'-60px', left:'-60px', width:280, height:280, borderRadius:'50%', background:'radial-gradient(circle, #E5C9F260 0%, transparent 70%)', pointerEvents:'none' }} />

      {/* logo */}
      <div style={{ marginBottom: 10 }}>
        <div style={{
          width: 72, height: 72, borderRadius: 24, margin: '0 auto 16px',
          background: 'linear-gradient(155deg, #FFB8D4, #EC6F9E)',
          boxShadow: '0 12px 36px rgba(220,90,140,.30)',
          display: 'grid', placeItems: 'center',
        }}>
          <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 20s-7-4.4-7-9.3C5 7.9 7 6.3 9 6.3c1.6 0 2.6 1 3 1.9.4-.9 1.4-1.9 3-1.9 2 0 4 1.6 4 4.4C19 15.6 12 20 12 20z"/>
          </svg>
        </div>
        <h1 style={{ fontFamily:'var(--font-ui)', fontSize:28, textAlign:'center', margin:0, letterSpacing:'-.01em' }}>Our Little Ledger</h1>
        <p style={{ fontFamily:'var(--font-ui)', color:'var(--ink-faint)', fontSize:14, fontWeight:600, textAlign:'center', margin:'6px 0 0' }}>View &amp; Mimi 💕</p>
      </div>

      {/* who are you */}
      <div style={{ marginTop: 36, marginBottom: 10 }}>
        <p style={{ fontFamily:'var(--font-ui)', fontWeight:700, fontSize:18, textAlign:'center', color:'var(--ink)', margin:0 }}>Who are you today?</p>
        <p style={{ fontFamily:'var(--font-body)', color:'var(--ink-faint)', fontSize:13.5, textAlign:'center', margin:'6px 0 0' }}>Your choice is saved on this device</p>
      </div>

      {/* owner cards */}
      <div style={{ display:'flex', gap:16, marginTop:24, flexWrap:'wrap', justifyContent:'center' }}>
        {S.owners.map(o => {
          const isHov = hovered === o.id;
          return (
            <button key={o.id}
              onMouseEnter={() => setHovered(o.id)}
              onMouseLeave={() => setHovered(null)}
              onClick={() => onChoose(o.id)}
              style={{
                width: 168, padding: '28px 20px 24px', borderRadius: 28,
                background: isHov ? tint(o.color, 0.12) : '#fff',
                border: `2px solid ${isHov ? o.color : 'var(--line)'}`,
                boxShadow: isHov ? `0 16px 40px ${tint(o.color, 0.5)}` : 'var(--sh-md)',
                transform: isHov ? 'translateY(-4px) scale(1.03)' : 'none',
                transition: 'all .22s cubic-bezier(.34,1.32,.44,1)',
                display: 'flex', flexDirection:'column', alignItems:'center', gap:14,
                cursor: 'pointer',
              }}>
              {/* big avatar */}
              <div style={{
                width: 68, height: 68, borderRadius: '50%',
                background: `linear-gradient(150deg, ${o.color}, ${shade(o.color, -18)})`,
                display: 'grid', placeItems:'center',
                boxShadow: `0 8px 24px ${tint(o.color, 0.45)}`,
                fontFamily:'var(--font-ui)', fontWeight:800, fontSize:28, color:'#fff',
              }}>{o.name[0]}</div>
              <div style={{ fontFamily:'var(--font-ui)', fontWeight:700, fontSize:18, color: shade(o.color,-20) }}>{o.name}</div>
              <div style={{
                padding:'9px 18px', borderRadius:999,
                background: isHov ? o.color : tint(o.color, 0.15),
                color: isHov ? '#fff' : shade(o.color,-16),
                fontFamily:'var(--font-ui)', fontWeight:700, fontSize:13,
                transition:'all .18s',
                boxShadow: isHov ? `0 6px 16px ${tint(o.color,0.45)}` : 'none',
              }}>That's me! {isHov ? '✨' : ''}</div>
            </button>
          );
        })}
      </div>

      <p style={{ marginTop:32, fontSize:12.5, color:'var(--ink-faint)', fontFamily:'var(--font-ui)', fontWeight:600, textAlign:'center', maxWidth:280, lineHeight:1.6 }}>
        🔒 Your data syncs live between both phones via Firebase
      </p>
    </div>
  );
}

function SignInScreen({ status, detail, onSignIn }) {
  const busy = status === 'connecting';
  return (
    <div style={{ position:'fixed', inset:0, zIndex:400, background:'linear-gradient(160deg, #FFF0F6, #F5EAFB)', display:'grid', placeItems:'center', padding:24 }}>
      <div style={{ width:'min(420px, 100%)', background:'#fff', borderRadius:28, padding:'38px 30px', boxShadow:'var(--sh-lg)', textAlign:'center' }}>
        <div style={{ width:68, height:68, borderRadius:22, margin:'0 auto 18px', background:'linear-gradient(155deg, #FFB8D4, #EC6F9E)', display:'grid', placeItems:'center', color:'#fff', fontSize:30 }}>♥</div>
        <h1 style={{ fontFamily:'var(--font-ui)', fontSize:25, margin:'0 0 8px' }}>Our Little Ledger</h1>
        <p style={{ color:'var(--ink-faint)', lineHeight:1.6, margin:'0 0 24px' }}>Private access for View and Mimi only.</p>
        <button className="btn btn-primary" disabled={busy} onClick={onSignIn} style={{ width:'100%', justifyContent:'center', padding:'13px 18px' }}>
          {busy ? 'Connecting…' : 'Sign in with Google'}
        </button>
        {detail && <p style={{ margin:'16px 0 0', color:status === 'unauthorized' ? '#C94F60' : 'var(--ink-faint)', fontSize:13 }}>{detail}</p>}
      </div>
    </div>
  );
}

Object.assign(window, { WelcomeScreen, SignInScreen, useIdentity });