// Home / Projects — warm editorial, matches website language
const { useState: uH } = React;

function ScreenHome({ state, nav }) {
  const [view, setView] = uH('grid');
  const [tab, setTab] = uH('recent');
  const projects = state.projects;

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100%', background:'var(--bone)'}}>
      {/* Header */}
      <div style={{padding:'58px var(--pad) 16px'}}>
        <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:20}}>
          <div>
            <div style={{fontSize:11, letterSpacing:1.6, color:'var(--ink-3)', fontWeight:500, textTransform:'uppercase', fontFamily:'var(--mono)'}}>
              <span style={{display:'inline-block', width:6, height:6, borderRadius:'50%', background:'var(--accent)', marginRight:8, verticalAlign:'middle', transform:'translateY(-1px)'}}/>
              Good afternoon, Mei
            </div>
            <div style={{fontFamily:'var(--serif)', fontSize:40, lineHeight:1.02, letterSpacing:-0.8, marginTop:6, color:'var(--ink)', fontWeight:400}}>
              Your <span style={{fontStyle:'italic', color:'var(--accent-deep)'}}>studio</span>
            </div>
          </div>
          <button onClick={() => nav.openTweaks && nav.openTweaks()} style={{
            width:40, height:40, borderRadius:12,
            background:'var(--cream)', border:'1px solid var(--rule)',
            color:'var(--ink-2)', display:'inline-flex', alignItems:'center', justifyContent:'center',
            boxShadow:'0 1px 2px rgba(56,40,20,0.04)',
          }}><I.sliders/></button>
        </div>

        {/* Stats */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginBottom:18}}>
          <StatCell value="12" label="Tutorials"/>
          <StatCell value="4.2k" label="Views" accent/>
          <StatCell value="28m" label="Recorded"/>
        </div>

        {/* Hero card */}
        <div style={{
          background:'linear-gradient(135deg, #FBEADD 0%, #FFFBF5 70%)',
          border:'1px solid var(--accent-soft)',
          borderRadius:18, padding:18, position:'relative', overflow:'hidden',
        }}>
          <div style={{position:'absolute', top:-30, right:-30, width:140, height:140, borderRadius:'50%',
            background:'radial-gradient(circle, rgba(232,123,78,0.18) 0%, transparent 70%)'}}/>
          <div style={{position:'relative'}}>
            <div style={{fontSize:10, letterSpacing:1.8, color:'var(--accent-deep)', fontWeight:500, marginBottom:8, textTransform:'uppercase', fontFamily:'var(--mono)'}}>New project</div>
            <div style={{fontFamily:'var(--serif)', fontSize:24, letterSpacing:-0.4, marginBottom:4, color:'var(--ink)', lineHeight:1.1}}>Record a tutorial</div>
            <div style={{fontSize:13, color:'var(--ink-2)', marginBottom:14, lineHeight:1.5}}>
              Script, record, and publish in under 5 minutes.
            </div>
            <div style={{display:'flex', gap:8}}>
              <button onClick={() => nav.go('prepare')} style={{
                padding:'10px 14px', borderRadius:11, background:'var(--ink)', color:'var(--bone)',
                fontSize:13, fontWeight:500, display:'inline-flex', alignItems:'center', gap:6,
                boxShadow:'0 6px 16px -6px rgba(30,26,21,0.4)',
              }}><I.plus s={15} w={2}/> New tutorial</button>
              <button onClick={() => nav.go('prepare')} style={{
                padding:'10px 14px', borderRadius:11, background:'var(--cream)',
                border:'1px solid var(--rule)', color:'var(--ink)',
                fontSize:13, fontWeight:500, display:'inline-flex', alignItems:'center', gap:6,
              }}><I.sparkle s={13}/> From template</button>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{padding:'0 var(--pad)', marginBottom:12, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{display:'flex', gap:4}}>
          {['recent','drafts','published'].map(t => (
            <button key={t} onClick={()=>setTab(t)} style={{
              padding:'7px 11px', borderRadius:8,
              background: tab===t ? 'var(--ink)' : 'transparent',
              color: tab===t ? 'var(--bone)' : 'var(--ink-3)',
              fontSize:12.5, fontWeight:500, textTransform:'capitalize',
            }}>{t}</button>
          ))}
        </div>
        <div style={{display:'flex', gap:2}}>
          <button onClick={()=>setView('grid')} style={{padding:6, borderRadius:6, color: view==='grid'?'var(--ink)':'var(--ink-3)'}}><I.grid/></button>
          <button onClick={()=>setView('list')} style={{padding:6, borderRadius:6, color: view==='list'?'var(--ink)':'var(--ink-3)'}}><I.list/></button>
        </div>
      </div>

      {/* Projects */}
      <div className="scroll" style={{flex:1, overflow:'auto', padding:'0 var(--pad) 100px'}}>
        {view === 'grid' ? (
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {projects.map(p => <ProjectCard key={p.id} p={p} onOpen={()=>nav.go('prepare')}/>)}
          </div>
        ) : (
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {projects.map(p => <ProjectRow key={p.id} p={p} onOpen={()=>nav.go('prepare')}/>)}
          </div>
        )}
      </div>
    </div>
  );
}

function StatCell({ value, label, accent }) {
  return (
    <div style={{
      padding:'12px 12px',
      background:'var(--cream)',
      border:'1px solid var(--rule)',
      borderRadius:12,
    }}>
      <div style={{fontFamily:'var(--serif)', fontSize:26, letterSpacing:-0.6, color: accent?'var(--accent-deep)':'var(--ink)', lineHeight:1}}>{value}</div>
      <div style={{fontSize:10, letterSpacing:1.2, color:'var(--ink-3)', textTransform:'uppercase', fontWeight:500, marginTop:6, fontFamily:'var(--mono)'}}>{label}</div>
    </div>
  );
}

// Warm caption tones for project cards
const WARM_GRADIENTS = {
  1:'linear-gradient(150deg, #F2C9A6 0%, #E4A988 100%)',
  2:'linear-gradient(150deg, #C9DDD2 0%, #9FC0B0 100%)',
  3:'linear-gradient(150deg, #EFD7A5 0%, #D9B878 100%)',
  4:'linear-gradient(150deg, #E8CDB2 0%, #C9A888 100%)',
  5:'linear-gradient(150deg, #D4C7D4 0%, #B69BB5 100%)',
  6:'linear-gradient(150deg, #F4D7C0 0%, #E0B397 100%)',
};

function ProjectCard({ p, onOpen }) {
  const grad = WARM_GRADIENTS[p.id] || WARM_GRADIENTS[1];
  return (
    <button onClick={onOpen} style={{
      textAlign:'left', background:'var(--cream)', border:'1px solid var(--rule)',
      borderRadius:14, overflow:'hidden', display:'flex', flexDirection:'column',
      boxShadow:'0 1px 2px rgba(56,40,20,0.04)',
    }}>
      <div style={{
        aspectRatio:'9/12', background: grad,
        position:'relative', overflow:'hidden',
        display:'flex', alignItems:'flex-end', padding:8,
      }}>
        {/* soft inner highlight */}
        <div style={{position:'absolute', inset:0, boxShadow:'inset 0 1px 0 rgba(255,255,255,0.4)'}}/>
        {/* caption */}
        <div style={{
          position:'relative', fontFamily:'var(--serif)', fontStyle:'italic',
          padding:'4px 8px', borderRadius:6, fontSize:15, color:'var(--ink)',
          background:'rgba(255,251,245,0.7)', backdropFilter:'blur(4px)',
          letterSpacing:-0.2,
        }}>{p.caption}</div>
        {/* lang chip */}
        {p.lang && <div style={{position:'absolute', top:8, left:8,
          background:'rgba(30,26,21,0.78)', color:'var(--bone)',
          padding:'3px 7px', borderRadius:999, fontSize:9, fontWeight:500, letterSpacing:1.2, fontFamily:'var(--mono)',
        }}>{p.lang}</div>}
        {/* status */}
        <div style={{position:'absolute', top:8, right:8}}>
          {p.status === 'published' && <StatusPill tone="sage">LIVE</StatusPill>}
          {p.status === 'draft' && <StatusPill tone="butter">DRAFT</StatusPill>}
          {p.status === 'recording' && <StatusPill tone="coral">REC</StatusPill>}
        </div>
      </div>
      <div style={{padding:'10px 11px'}}>
        <div style={{fontSize:13, fontWeight:500, letterSpacing:-0.2, marginBottom:3, lineHeight:1.3, color:'var(--ink)'}}>{p.title}</div>
        <div style={{fontSize:10.5, color:'var(--ink-3)', display:'flex', alignItems:'center', gap:6, fontFamily:'var(--mono)'}}>
          <span>{p.slides} slides</span>
          <span>·</span>
          <span>{p.time}</span>
        </div>
      </div>
    </button>
  );
}

function StatusPill({ children, tone='sage' }) {
  const tones = {
    sage:   { bg:'var(--sage-soft)', fg:'#3F6B5B' },
    butter: { bg:'#FAEFC8', fg:'#8A6D1C' },
    coral:  { bg:'var(--accent-soft)', fg:'var(--accent-deep)' },
  };
  const t = tones[tone];
  return (
    <span style={{
      padding:'3px 7px', borderRadius:999,
      background:t.bg, color:t.fg,
      fontSize:9.5, fontWeight:600, letterSpacing:1.2, textTransform:'uppercase',
      fontFamily:'var(--mono)',
    }}>{children}</span>
  );
}

function ProjectRow({ p, onOpen }) {
  const grad = WARM_GRADIENTS[p.id] || WARM_GRADIENTS[1];
  return (
    <button onClick={onOpen} style={{
      display:'flex', alignItems:'center', gap:12, padding:10,
      background:'var(--cream)', border:'1px solid var(--rule)', borderRadius:12, textAlign:'left',
    }}>
      <div style={{width:48, height:64, borderRadius:8, background: grad, flexShrink:0}}/>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize:13.5, fontWeight:500, letterSpacing:-0.2, color:'var(--ink)'}}>{p.title}</div>
        <div style={{fontSize:11, color:'var(--ink-3)', marginTop:2, fontFamily:'var(--mono)'}}>{p.slides} slides · {p.time}</div>
      </div>
      {p.status === 'published' && <StatusPill tone="sage">LIVE</StatusPill>}
      {p.status === 'draft' && <StatusPill tone="butter">DRAFT</StatusPill>}
      <I.chevR/>
    </button>
  );
}

window.ScreenHome = ScreenHome;