/* ===========================================================================
   iRaven App Store Studio — Home: project list + creation entry points.
   =========================================================================== */

function HomePage({ projects, onOpen, onNewAI, onNewBlank, onOpenFile, onDelete }) {
  const fileRef = React.useRef(null);
  return (
    <div style={{ position: 'fixed', inset: 0, background: '#070a14', overflowY: 'auto', fontFamily: BODY }}>
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 28px', height: 64, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <span style={{ fontFamily: DISPLAY, fontWeight: 700, fontSize: 21, letterSpacing: '-0.02em', color: '#fff' }}>
          <span style={{ color: '#7aa6ff' }}>iRaven</span> App Store Studio
        </span>
        <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: 'rgba(255,255,255,0.35)' }}>
          {projects.length} app{projects.length === 1 ? '' : 's'}
        </span>
      </header>

      <div style={{ maxWidth: 980, margin: '0 auto', padding: '40px 24px' }}>
        <h1 style={{ margin: '0 0 6px', fontFamily: DISPLAY, fontWeight: 700, fontSize: 30, color: '#fff',
          letterSpacing: '-0.02em' }}>Your apps</h1>
        <p style={{ margin: '0 0 26px', fontSize: 14, color: 'rgba(255,255,255,0.5)', maxWidth: 560 }}>
          Each app gets its own screenshots, App Previews and brand. Start with the AI wizard —
          it interviews you about the product, drafts the marketing concepts, and builds the project.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px,1fr))', gap: 16 }}>
          <button onClick={onNewAI} style={{ borderRadius: 18, padding: '26px 20px', cursor: 'pointer',
            textAlign: 'left', border: '1px solid #3b78ff',
            background: 'linear-gradient(160deg, rgba(47,109,246,0.25), rgba(31,74,176,0.10))' }}>
            <div style={{ fontSize: 24, marginBottom: 10 }}>✦</div>
            <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 17, color: '#fff', marginBottom: 4 }}>
              New app · AI wizard</div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.6)', fontFamily: BODY }}>
              Chat about your product → approve generated concepts → studio.</div>
          </button>

          <button onClick={onNewBlank} style={{ borderRadius: 18, padding: '26px 20px', cursor: 'pointer',
            textAlign: 'left', border: '1px dashed rgba(255,255,255,0.22)', background: 'rgba(255,255,255,0.02)' }}>
            <div style={{ fontSize: 24, marginBottom: 10, color: 'rgba(255,255,255,0.6)' }}>+</div>
            <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 17, color: '#fff', marginBottom: 4 }}>
              Blank app</div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', fontFamily: BODY }}>
              Start from an empty project and write everything yourself.</div>
          </button>

          <button onClick={() => fileRef.current && fileRef.current.click()} style={{ borderRadius: 18, padding: '26px 20px',
            cursor: 'pointer', textAlign: 'left', border: '1px dashed rgba(255,255,255,0.22)', background: 'rgba(255,255,255,0.02)' }}>
            <div style={{ fontSize: 24, marginBottom: 10, color: 'rgba(255,255,255,0.6)' }}>📂</div>
            <div style={{ fontFamily: DISPLAY, fontWeight: 600, fontSize: 17, color: '#fff', marginBottom: 4 }}>
              Open project file</div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', fontFamily: BODY }}>
              Restore a saved <span style={{ fontFamily: "'JetBrains Mono',monospace" }}>.socc360.json</span> — all screens, previews & media.</div>
          </button>
          <input ref={fileRef} type="file" accept=".json,application/json" style={{ display: 'none' }}
            onChange={e => { const f = e.target.files[0]; e.target.value = ''; if (f && onOpenFile) onOpenFile(f); }} />

          {projects.map(p => (
            <div key={p.id} onClick={() => onOpen(p.id)} style={{ borderRadius: 18, padding: '22px 20px',
              cursor: 'pointer', border: '1px solid rgba(255,255,255,0.10)', background: 'rgba(255,255,255,0.04)',
              position: 'relative' }}>
              <div style={{ fontFamily: DISPLAY, fontWeight: 700, fontSize: 19, marginBottom: 4 }}>
                {(() => { const [a, b] = window.splitBrandName(p.name);
                  return (<>
                    <span style={{ color: (p.brand && p.brand.accent1) || '#7aa6ff' }}>{a}</span>
                    <span style={{ color: (p.brand && p.brand.accent2) || '#f5a623' }}>{b}</span>
                  </>); })()}
              </div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', marginBottom: 14, minHeight: 17 }}>
                {(p.brand && p.brand.tagline) || ''}
              </div>
              <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5, color: 'rgba(255,255,255,0.4)' }}>
                {p.counts ? `${p.counts.slides} screens · ${p.counts.videos} previews` : ''}
              </div>
              <button title="Delete app" onClick={e => { e.stopPropagation(); onDelete(p.id); }}
                style={{ position: 'absolute', top: 12, right: 12, border: 'none', background: 'transparent',
                  color: 'rgba(255,128,137,0.8)', cursor: 'pointer', fontSize: 14 }}>✕</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage });