// V3 — Image-forward: hero holo card, rich category cards, action rows, toggleable months.
/* global React, Sp, StatusBar, TabBar */

function HomeV3({ theme }) {
  const th = theme;
  const light = th.mode === 'light';
  const [monthView, setMonthView] = React.useState('list'); // 'list' | 'grid'
  const [toolsOpen, setToolsOpen] = React.useState(false);

  // Primary categories — each with its own palette + preview strip
  const cats = [
    { key:'random',      t:'Random',      n:'1,284', sub:'photos ready',
      c:'#F05BE8', c2:'#6B4BFF', bloom:'rgba(240,91,232,0.28)', ic:'⇄' },
    { key:'recents',     t:'Recents',     n:'312',   sub:'new this month',
      c:'#5BE3FF', c2:'#2F7BFF', bloom:'rgba(91,227,255,0.28)', ic:'◔' },
    { key:'duplicates',  t:'Duplicates',  n:null,    sub:'scan to detect',
      c:'#FF8A3D', c2:'#F07A1A', bloom:'rgba(255,138,61,0.28)', ic:'⧉' },
    { key:'screenshots', t:'Screenshots', n:'148',   sub:'to review',
      c:'#FFC14D', c2:'#F07A1A', bloom:'rgba(255,193,77,0.28)', ic:'▦' },
  ];

  // Secondary tools — surfaced via the "More tools" bottom sheet
  const tools = [
    { t:'Time Capsule', sub:'4 years of memories', ic:'📖', grad:'linear-gradient(135deg,#2F7BFF,#6B4BFF)' },
    { t:'Bulk Swipe',   sub:'Power through 200+',  ic:'☑',  grad:'linear-gradient(135deg,#6FF0B0,#2BB869)' },
    { t:'Hidden',       sub:'24 hidden items',     ic:'◐',  grad:'linear-gradient(135deg,#8A8F9B,#3D4252)' },
  ];

  const months = [
    { m:'April',    y:2026, n:253, grad:'linear-gradient(135deg,#F05BE8,#6B4BFF)' },
    { m:'March',    y:2026, n:813, grad:'linear-gradient(135deg,#6FF0B0,#2BB869)' },
    { m:'February', y:2026, n:180, grad:'linear-gradient(135deg,#FFC14D,#F07A1A)' },
    { m:'January',  y:2026, n:426, grad:'linear-gradient(135deg,#5BE3FF,#2F7BFF)' },
    { m:'December', y:2025, n:612, grad:'linear-gradient(135deg,#B794FF,#6B4BFF)' },
    { m:'November', y:2025, n:148, grad:'linear-gradient(135deg,#FF8A3D,#E63C8A)' },
  ];

  return (
    <div style={{width:'100%',height:'100%',background:th.bg0,color:th.fg1,fontFamily:"'Syne',sans-serif",overflow:'hidden',position:'relative'}}>
      <StatusBar th={th}/>

      <div style={{padding:'4px 18px 0'}}>
        {/* Greeting */}
        <div style={{display:'flex', alignItems:'center', gap:10, marginTop:8}}>
          <div style={{flex:1}}>
            <div style={{fontSize:11, color:th.fg3, fontWeight:500}}>Good morning,</div>
            <div style={{fontSize:18, fontWeight:700, letterSpacing:'-0.01em'}}>ready to clean?</div>
          </div>
          <div style={{width:36, height:36, borderRadius:10, background:th.s2, border:`1px solid ${th.b2}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, color:th.fg2}}>🔔</div>
        </div>

        {/* Hero scan card */}
        <div style={{
          marginTop:16, height:150, borderRadius:24, position:'relative', overflow:'hidden',
          background:'#000',
          boxShadow:'0 14px 40px rgba(240,91,232,0.25), 0 4px 16px rgba(91,227,255,0.18)',
        }}>
          <div style={{position:'absolute',inset:-40,background:'conic-gradient(from 200deg at 50% 50%,#6B4BFF,#4B7BFF,#5BE3FF,#6FF0B0,#FFE066,#FF8A3D,#F05BE8,#6B4BFF)',filter:'blur(30px)',opacity:0.8,animation:'spin 14s linear infinite'}}/>
          <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
          <Sp top={18} left={28} size={12} o={1}/>
          <Sp top={50} right={32} size={9} o={0.8}/>
          <Sp top={100} left={80} size={7} o={0.6}/>
          <Sp top={82} right={100} size={11} o={0.9}/>
          <div style={{position:'absolute', inset:0, padding:18, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
              <div>
                <div style={{fontSize:10, fontWeight:700, color:'#fff', letterSpacing:'0.12em', textShadow:'0 1px 2px rgba(0,0,0,0.3)'}}>SCAN COMPLETE</div>
                <div style={{fontSize:26, fontWeight:800, letterSpacing:'-0.025em', color:'#fff', lineHeight:1.05, marginTop:6, textShadow:'0 1px 3px rgba(0,0,0,0.3)'}}>3,276 photos<br/>to review</div>
              </div>
              <div style={{
                padding:'5px 10px', borderRadius:999,
                background:'rgba(0,0,0,0.35)', backdropFilter:'blur(12px)',
                fontSize:10, fontWeight:700, letterSpacing:'0.08em', color:'#fff',
              }}>PRO</div>
            </div>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div style={{fontSize:11, color:'rgba(255,255,255,0.8)', fontWeight:500}}>Start with On This Day →</div>
              <div style={{
                width:38, height:38, borderRadius:999, background:'#fff',
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'#0A0A0C', fontSize:15, fontWeight:800,
                boxShadow:'0 4px 12px rgba(0,0,0,0.3)',
              }}>▶</div>
            </div>
          </div>
        </div>

        {/* Quick access header with More tools link */}
        <div style={{marginTop:20, marginBottom:10, display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
          <div style={{fontSize:13, fontWeight:700, color:th.fg2, letterSpacing:'0.06em', textTransform:'uppercase'}}>Quick access</div>
          <div onClick={()=>setToolsOpen(true)} style={{
            fontSize:12, fontWeight:600, color:th.fg2, cursor:'pointer',
            display:'flex', alignItems:'center', gap:4,
            padding:'4px 2px',
          }}>More tools <span style={{fontSize:13, opacity:0.6}}>→</span></div>
        </div>

        {/* 2x2 category cards — refined type hierarchy */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
          {cats.map((c,i)=>(
            <div key={i} style={{
              position:'relative', borderRadius:18, padding:'14px 14px 16px',
              background:th.bg1, border:`1px solid ${th.b2}`, boxShadow:th.cardShadow,
              overflow:'hidden', minHeight:110,
            }}>
              {/* bloom */}
              <div style={{position:'absolute', top:-30, right:-30, width:100, height:100, borderRadius:999, background:c.bloom, filter:'blur(22px)'}}/>
              {/* icon */}
              <div style={{
                width:34, height:34, borderRadius:10,
                background:`linear-gradient(135deg,${c.c},${c.c2})`,
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'#fff', fontSize:15, fontWeight:500,
                boxShadow:`0 4px 12px ${c.bloom}`,
                position:'relative', zIndex:1,
              }}>{c.ic}</div>
              {/* title */}
              <div style={{
                fontSize:17, fontWeight:600, letterSpacing:'-0.015em',
                color:th.fg1, marginTop:14, lineHeight:1.1,
                position:'relative', zIndex:1,
              }}>{c.t}</div>
              {/* metric or hint */}
              <div style={{marginTop:6, position:'relative', zIndex:1}}>
                {c.n ? (
                  <div style={{display:'flex', alignItems:'baseline', gap:5}}>
                    <div style={{fontSize:20, fontWeight:700, letterSpacing:'-0.025em', color:c.c, lineHeight:1}}>{c.n}</div>
                    <div style={{fontSize:11, color:th.fg3, fontWeight:400}}>{c.sub}</div>
                  </div>
                ) : (
                  <div style={{
                    display:'inline-flex', alignItems:'center', gap:5,
                    padding:'3px 8px', borderRadius:999,
                    background: light ? 'rgba(0,0,0,0.04)' : 'rgba(255,255,255,0.06)',
                    fontSize:10, fontWeight:500, color:th.fg3,
                  }}>
                    <span style={{width:4, height:4, borderRadius:999, background:c.c}}/>
                    {c.sub}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* Secondary action rows removed — Time Capsule / Bulk Swipe / Hidden
            now live behind "More tools →" to keep Browse by Month above the fold. */}

        {/* Months — header with list/grid toggle */}
        <div style={{marginTop:22, marginBottom:10, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{fontSize:13, fontWeight:700, color:th.fg2, letterSpacing:'0.06em', textTransform:'uppercase'}}>Browse by month</div>
          <div style={{
            display:'flex', padding:2, borderRadius:999,
            background:th.bg1, border:`1px solid ${th.b2}`,
          }}>
            {[{k:'list',ic:'≡'},{k:'grid',ic:'▦'}].map(o=>{
              const sel = monthView === o.k;
              return (
                <div key={o.k} onClick={()=>setMonthView(o.k)} style={{
                  padding:'4px 10px', borderRadius:999, fontSize:11, fontWeight:700, cursor:'pointer',
                  background: sel ? th.fg1 : 'transparent',
                  color: sel ? th.bg0 : th.fg3,
                  transition:'all 0.15s',
                }}>{o.ic} {o.k}</div>
              );
            })}
          </div>
        </div>

        {monthView === 'list' ? (
          /* LIST view — rows with gradient chip + count */
          <div style={{borderRadius:16, overflow:'hidden', background:th.bg1, border:`1px solid ${th.b2}`, boxShadow:th.cardShadow}}>
            {months.map((m,i)=>(
              <div key={i} style={{
                padding:'12px 14px', display:'flex', alignItems:'center', gap:12,
                borderTop: i>0 ? `1px solid ${th.b1}` : 'none',
              }}>
                <div style={{
                  width:40, height:40, borderRadius:10, background:m.grad,
                  flexShrink:0, position:'relative', overflow:'hidden',
                  boxShadow:'0 2px 6px rgba(0,0,0,0.18)',
                }}>
                  <div style={{position:'absolute',inset:0,background:'linear-gradient(135deg, rgba(255,255,255,0.25), transparent 60%)'}}/>
                </div>
                <div style={{flex:1}}>
                  <div style={{fontSize:14, fontWeight:700, color:th.fg1, letterSpacing:'-0.01em'}}>
                    {m.m} <span style={{color:th.fg4, fontWeight:500}}>{m.y}</span>
                  </div>
                  <div style={{fontSize:11, color:th.fg3, marginTop:1}}>{m.n} photos</div>
                </div>
                <div style={{
                  fontSize:14, fontWeight:800, letterSpacing:'-0.02em', color:th.fg2,
                  minWidth:44, textAlign:'right',
                }}>{m.n}</div>
                <div style={{color:th.fg4, fontSize:16, marginLeft:4}}>›</div>
              </div>
            ))}
          </div>
        ) : (
          /* GRID view — gradient tiles, month label overlay */
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
            {months.map((m,i)=>(
              <div key={i} style={{
                aspectRatio:'0.85', borderRadius:14, overflow:'hidden', position:'relative',
                background:m.grad, boxShadow:th.cardShadow,
              }}>
                <div style={{position:'absolute',inset:0,background:'linear-gradient(to bottom,transparent 40%,rgba(0,0,0,0.55) 100%)'}}/>
                <div style={{
                  position:'absolute', top:8, right:8, padding:'2px 7px', borderRadius:999,
                  background:'rgba(0,0,0,0.35)', backdropFilter:'blur(8px)',
                  color:'#fff', fontSize:9, fontWeight:800, letterSpacing:'0.04em',
                }}>'{String(m.y).slice(-2)}</div>
                <div style={{position:'absolute', left:10, bottom:10, right:10}}>
                  <div style={{fontSize:15, fontWeight:800, letterSpacing:'-0.02em', color:'#fff', lineHeight:1, textShadow:'0 1px 2px rgba(0,0,0,0.3)'}}>{m.m}</div>
                  <div style={{fontSize:10, fontWeight:600, color:'rgba(255,255,255,0.85)', marginTop:3}}>{m.n} photos</div>
                </div>
              </div>
            ))}
          </div>
        )}

        <div style={{height:110}}/>
      </div>

      {/* More tools bottom sheet */}
      {toolsOpen && (
        <>
          <div onClick={()=>setToolsOpen(false)} style={{
            position:'absolute', inset:0, background:'rgba(0,0,0,0.55)',
            backdropFilter:'blur(4px)', zIndex:30,
          }}/>
          <div style={{
            position:'absolute', left:0, right:0, bottom:0, zIndex:31,
            background:th.bg1, borderTopLeftRadius:24, borderTopRightRadius:24,
            padding:'10px 18px 32px',
            boxShadow:'0 -20px 60px rgba(0,0,0,0.4)',
            borderTop:`1px solid ${th.b2}`,
          }}>
            <div style={{width:40, height:4, borderRadius:2, background:th.fg4, margin:'6px auto 16px'}}/>
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:10}}>
              <div style={{fontSize:18, fontWeight:800, letterSpacing:'-0.02em', color:th.fg1}}>More tools</div>
              <div onClick={()=>setToolsOpen(false)} style={{fontSize:13, color:th.fg3, cursor:'pointer', padding:'4px 2px'}}>Close</div>
            </div>
            {tools.map((t,i)=>(
              <div key={i} style={{
                padding:'12px 0', display:'flex', alignItems:'center', gap:12,
                borderTop: i>0 ? `1px solid ${th.b1}` : 'none',
              }}>
                <div style={{
                  width:44, height:44, borderRadius:12, background:t.grad,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color:'#fff', fontSize:18, flexShrink:0,
                }}>{t.ic}</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:15, fontWeight:700, color:th.fg1, letterSpacing:'-0.01em'}}>{t.t}</div>
                  <div style={{fontSize:12, color:th.fg3, marginTop:1}}>{t.sub}</div>
                </div>
                <div style={{color:th.fg4, fontSize:16}}>›</div>
              </div>
            ))}
          </div>
        </>
      )}
      <TabBar th={th} active="home" darkPill={false}/>
    </div>
  );
}
window.HomeV3 = HomeV3;