// Home / multi-currency dashboard — top of the navigation tree.

function ScreenHome({ dark }) {
  const wallets = window.useAppStore(s => s.wallets);
  const hideBalances = window.useAppStore(s => s.settings.hideBalances);
  const spark = "M0,30 L20,28 40,22 60,24 80,18 100,16 120,20 140,12 160,14 180,8 200,10 220,4";

  // Total in AED-equivalent across all wallets (live)
  const rate = window.appStore.rate;
  const totalAed = Object.values(wallets).reduce((s, w) => s + w.balance / rate('AED', w.code), 0);
  const totalStr = hideBalances ? 'AED ••••••••' : `AED ${Math.round(totalAed).toLocaleString('en-GB')}`;

  const ORDER = ['AED','GBP','USD','EUR'];

  return (
    <div style={{ background: phoneStyles.surface(dark), height:'100%', display:'flex', flexDirection:'column', paddingTop: 56, paddingBottom: 80 }}>
      {/* Top — greeting + avatar */}
      <div style={{ padding:'8px 20px 4px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div>
          <div style={{ fontSize: 12, color: phoneStyles.muted(dark), fontWeight: 500 }}>Good morning,</div>
          <div style={{ fontFamily:'Montserrat', fontWeight:700, fontSize: 22, color: phoneStyles.text(dark), letterSpacing:'-0.02em', marginTop: 2 }}>Aisha</div>
        </div>
        <div style={{ display:'flex', gap: 8 }}>
          <div onClick={()=>window.appStore.showToast('Search coming soon')} role="button" style={{ cursor:'pointer', width:38, height:38, borderRadius: 2, background: phoneStyles.cardAlt(dark), color: phoneStyles.text(dark), display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="search" size={17}/>
          </div>
          <div onClick={()=>window.nav && window.nav('settings')} role="button" style={{ cursor:'pointer', width:38, height:38, borderRadius: 2, background:'var(--falcon-primary)', color:'var(--falcon-on-primary)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Montserrat', fontWeight: 700, fontSize: 13 }}>AM</div>
        </div>
      </div>

      {/* Hero — total balance card */}
      <div style={{ margin: '14px 16px 0' }}>
        <div style={{
          background: '#0E1F1C',
          color:'#FAFBF9',
          borderRadius: 3, padding: '20px 22px 18px',
          position:'relative', overflow:'hidden',
          border: '1px solid rgba(255,255,255,0.06)',
        }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <span style={{ fontSize: 10, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.6 }}>Total · across 4 wallets</span>
            <div onClick={()=>window.appStore.update('settings.hideBalances', !hideBalances)} role="button" style={{ cursor:'pointer' }}>
              <Icon name="eye" size={14} stroke="#FAFBF9"/>
            </div>
          </div>
          <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 32, letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums', marginTop: 8 }}>
            {totalStr}
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 8, marginTop: 6, fontSize: 11, opacity: 0.7, fontFamily:'JetBrains Mono, monospace' }}>
            <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}>
              <Icon name="arrow-up-right" size={11} stroke="#FAFBF9" sw={2}/> +AED 184,200
            </span>
            <span>this week</span>
          </div>

          <svg viewBox="0 0 220 36" style={{ width:'100%', height: 32, marginTop: 14, display:'block' }} preserveAspectRatio="none">
            <defs>
              <linearGradient id="home-spk" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="var(--falcon-accent)" stopOpacity="0.25"/>
                <stop offset="1" stopColor="var(--falcon-accent)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d={`${spark} L220,36 L0,36 Z`} fill="url(#home-spk)"/>
            <path d={spark} fill="none" stroke="var(--falcon-accent)" strokeWidth="1.4"/>
          </svg>
        </div>
      </div>

      {/* Quick actions */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 6, padding:'16px 16px 4px' }}>
        {[
          { l:'Send',    i:'send',     r:'beneficiaries' },
          { l:'Convert', i:'swap',     r:'fx' },
          { l:'Receive', i:'receive',  r:'wallet' },
          { l:'Activity',i:'list',     r:'tx-list' },
        ].map(a=>(
          <div key={a.l}
            onClick={()=>window.nav && window.nav(a.r)}
            role="button"
            style={{ cursor:'pointer', padding:'14px 0 10px', display:'flex', flexDirection:'column', alignItems:'center', gap: 6, background: phoneStyles.card(dark), border:`1px solid ${phoneStyles.border(dark)}`, borderRadius: 3 }}>
            <div style={{ width: 30, height: 30, borderRadius: 2, background: phoneStyles.cardAlt(dark), color: 'var(--falcon-primary)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name={a.i} size={16} stroke="var(--falcon-primary)" sw={1.8}/>
            </div>
            <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform:'uppercase', color: phoneStyles.text(dark) }}>{a.l}</span>
          </div>
        ))}
      </div>

      {/* Wallets */}
      <div style={{ padding:'18px 16px 4px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ fontSize: 13, fontWeight:700, color: phoneStyles.text(dark) }}>Your wallets</div>
        <div style={{ fontSize: 12, color:'var(--falcon-primary)', fontWeight:600 }}>4 currencies</div>
      </div>

      <div className="hide-scroll" style={{ flex:1, overflowY:'auto', padding:'4px 16px 0' }}>
        <div style={{ background: phoneStyles.card(dark), borderRadius: 3, border:`1px solid ${phoneStyles.border(dark)}`, padding:'2px 14px' }}>
          {ORDER.map((code, i) => {
            const w = wallets[code];
            const SYM = { AED:'AED ', USD:'$', GBP:'£', EUR:'€' };
            const balanceStr = hideBalances ? '••••••' : `${SYM[code]}${w.balance.toLocaleString('en-GB',{minimumFractionDigits:2,maximumFractionDigits:2})}`;
            return (
              <div key={code}
                onClick={()=>window.nav && window.nav('wallet', { currency: code })}
                role="button"
                style={{ cursor:'pointer', display:'flex', alignItems:'center', gap: 12, padding:'14px 0', borderBottom: i<ORDER.length-1?`1px solid ${phoneStyles.border(dark)}`:'none' }}>
                <FlagChip code={code} size={36}/>
                <div style={{ flex:1, minWidth: 0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: phoneStyles.text(dark) }}>{code}</span>
                    {code === 'AED' && (
                      <span style={{ fontSize: 9, fontWeight: 700, letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--falcon-primary)', background: 'rgba(232,78,156,0.1)', padding:'2px 6px', borderRadius: 4 }}>Primary</span>
                    )}
                  </div>
                  <div style={{ fontSize: 11, color: phoneStyles.muted(dark), marginTop: 2 }}>{w.name}</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontFamily:'Montserrat', fontWeight: 700, fontSize: 14, color: phoneStyles.text(dark), fontVariantNumeric:'tabular-nums' }}>
                    {balanceStr}
                  </div>
                  <div style={{ fontSize: 11, color: w.dir==='up' ? '#34AC12' : '#E74A49', marginTop: 2, fontWeight: 600 }}>{w.change}</div>
                </div>
                <Icon name="chevron" size={14} stroke={phoneStyles.faint(dark)}/>
              </div>
            );
          })}
        </div>

        {/* Powered by Kobble — subtle home footer */}
        <div onClick={()=>window.nav && window.nav('settings')} role="button" style={{ cursor:'pointer', textAlign:'center', fontSize: 10, color: phoneStyles.faint(dark), padding:'18px 0 8px', display:'flex', alignItems:'center', justifyContent:'center', gap: 5 }}>
          Operated on
          <span style={{ fontFamily:'Montserrat', fontWeight: 700, color: 'rgba(14,31,28,0.55)' }}>Kobble</span>
          <Icon name="info" size={11} stroke={phoneStyles.faint(dark)}/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenHome });