// Vidgas — shared atomic components
// Exports to window: Icon, Sidebar, TopBar, VideoCard, Hero, SectionHead, Chip

const { useState, useEffect, useRef } = React;

/* ---------- Icons ---------- */
// Compact icon set — stroke-based, 24x24 viewBox
const ICON_PATHS = {
  home:       'M3 12 L12 4 L21 12 M5 10 V20 H19 V10',
  library:    'M4 6 H20 M4 12 H20 M4 18 H14',
  collection: 'M3 7 H21 V19 H3 Z M3 7 L8 3 H16 L21 7',
  upload:     'M12 16 V4 M6 10 L12 4 L18 10 M4 20 H20',
  search:     'M11 4 A7 7 0 1 1 11 18 A7 7 0 0 1 11 4 Z M16 16 L21 21',
  play:       'M6 4 L20 12 L6 20 Z',
  pause:      'M6 4 H10 V20 H6 Z M14 4 H18 V20 H14 Z',
  heart:      'M12 21 C 5 16 2 12 2 8 C 2 5 4 3 7 3 C 9 3 11 4 12 6 C 13 4 15 3 17 3 C 20 3 22 5 22 8 C 22 12 19 16 12 21 Z',
  share:      'M4 12 V20 H20 V12 M16 6 L12 2 L8 6 M12 2 V15',
  download:   'M12 4 V16 M6 10 L12 16 L18 10 M4 20 H20',
  more:       'M5 12 A1.5 1.5 0 1 1 8 12 A1.5 1.5 0 0 1 5 12 Z M10.5 12 A1.5 1.5 0 1 1 13.5 12 A1.5 1.5 0 0 1 10.5 12 Z M16 12 A1.5 1.5 0 1 1 19 12 A1.5 1.5 0 0 1 16 12 Z',
  bell:       'M6 8 A6 6 0 0 1 18 8 V14 L20 17 H4 L6 14 Z M10 20 H14',
  settings:   'M12 8 A4 4 0 1 1 12 16 A4 4 0 0 1 12 8 Z M12 2 V5 M12 19 V22 M2 12 H5 M19 12 H22 M5 5 L7 7 M17 17 L19 19 M5 19 L7 17 M17 7 L19 5',
  arrowLeft:  'M19 12 H5 M12 5 L5 12 L12 19',
  chevR:      'M9 6 L15 12 L9 18',
  x:          'M6 6 L18 18 M18 6 L6 18',
  menu:       'M4 7 H20 M4 12 H20 M4 17 H20',
  film:       'M3 5 H21 V19 H3 Z M3 9 H21 M3 15 H21 M7 5 V19 M17 5 V19',
  folder:     'M3 7 H10 L12 5 H21 V19 H3 Z',
  trash:      'M5 7 H19 M10 4 H14 M9 7 V18 M15 7 V18 M6 7 L7 20 H17 L18 7',
  star:       'M12 3 L14.5 9 L21 9.5 L16 14 L17.5 20.5 L12 17 L6.5 20.5 L8 14 L3 9.5 L9.5 9 Z',
  clock:      'M12 4 A8 8 0 1 1 12 20 A8 8 0 0 1 12 4 Z M12 8 V12 L15 14',
  volume:     'M4 9 H8 L13 5 V19 L8 15 H4 Z M17 8 C 19 10 19 14 17 16 M19.5 5.5 C 22.5 9 22.5 15 19.5 18.5',
  expand:     'M4 4 H10 M4 4 V10 M20 4 H14 M20 4 V10 M4 20 H10 M4 20 V14 M20 20 H14 M20 20 V14',
  cog:        'M12 8 A4 4 0 1 1 12 16 A4 4 0 0 1 12 8 Z M21 12 C 21 12.5 21 13 21 13.5 L23 14.5 L21 18 L19 17 C 18.5 17.5 18 17.5 17.5 18 L17 20 H13 L12.5 18 C 12 17.5 11.5 17.5 11 17 L9 18 L7 14.5 L9 13.5 C 9 13 9 12.5 9 12 C 9 11.5 9 11 9 10.5 L7 9.5 L9 6 L11 7 C 11.5 6.5 12 6.5 12.5 6 L13 4 H17 L17.5 6 C 18 6.5 18.5 6.5 19 7 L21 6 L23 9.5 L21 10.5 C 21 11 21 11.5 21 12 Z',
  sparkles:   'M12 3 L13.5 8.5 L19 10 L13.5 11.5 L12 17 L10.5 11.5 L5 10 L10.5 8.5 Z M19 16 L19.7 18 L21.5 18.5 L19.7 19 L19 21 L18.3 19 L16.5 18.5 L18.3 18 Z',
  trend:      'M4 18 L9 12 L13 16 L20 7 M14 7 H20 V13',
  next:       'M5 4 L17 12 L5 20 Z M19 4 V20',
  prev:       'M19 4 L7 12 L19 20 Z M5 4 V20',
  fwd:        'M4 12 L11 6 V18 Z M12 12 L19 6 V18 Z',
  rwd:        'M20 12 L13 6 V18 Z M12 12 L5 6 V18 Z',
  caption:    'M3 6 H21 V18 H3 Z M7 11 C 7 10 8 10 9 10 M7 14 C 7 15 8 15 9 15 M14 11 C 14 10 15 10 16 10 M14 14 C 14 15 15 15 16 15',
  pip:        'M3 5 H21 V19 H3 Z M13 12 H19 V17 H13 Z',
  list:       'M4 6 H20 M4 12 H20 M4 18 H20',
  grid:       'M4 4 H10 V10 H4 Z M14 4 H20 V10 H14 Z M4 14 H10 V20 H4 Z M14 14 H20 V20 H14 Z',
};

function Icon({ name, size, style, className }) {
  const d = ICON_PATHS[name];
  if (!d) return null;
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
         strokeLinecap="round" strokeLinejoin="round"
         width={size} height={size} style={style} className={className}>
      <path d={d} />
    </svg>
  );
}

/* ---------- Sidebar ---------- */
function Sidebar({ route, navigate, collections }) {
  return (
    <aside className="sidebar">
      <div className="brand" onClick={() => navigate({ name: 'library' })} style={{ cursor: 'pointer' }}>
        <div className="brand-mark">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 4 L20 12 L5 20 Z" /></svg>
        </div>
        <div className="brand-name">Vidgas<span className="dot">.</span></div>
      </div>

      <div className="nav-section">
        <NavItem icon="home"       label="Beranda"      meta={null}   active={route.name === 'library'}     onClick={() => navigate({ name: 'library' })} />
        <NavItem icon="library"    label="Library"      meta="234"    active={false} onClick={() => navigate({ name: 'library' })} />
        <NavItem icon="collection" label="Koleksi"      meta={null}   active={route.name === 'collections'} onClick={() => navigate({ name: 'collections' })} />
        <NavItem icon="upload"     label="Upload"       meta={null}   active={route.name === 'upload'}      onClick={() => navigate({ name: 'upload' })} />
        <NavItem icon="search"     label="Cari"         meta={null}   active={route.name === 'search'}      onClick={() => navigate({ name: 'search' })} />
        <NavItem icon="clock"      label="Baru ditonton" meta={null}  active={false} onClick={() => navigate({ name: 'library' })} />
        <NavItem icon="star"       label="Favorit"      meta="32"     active={false} onClick={() => navigate({ name: 'library' })} />
      </div>

      <div className="nav-section">
        <div className="nav-section-label">Koleksi kamu</div>
        {collections.map(c => (
          <div key={c.id} className="nav-item" onClick={() => navigate({ name: 'collections' })}>
            <span className="collection-dot" style={{ background: c.color }}></span>
            <span className="nav-label">{c.name}</span>
            <span className="nav-meta">{c.count}</span>
          </div>
        ))}
      </div>

      <div className="storage-card">
        <div className="label">Storage</div>
        <div className="value">287.4 <small>/ 500 GB</small></div>
        <div className="storage-bar"><div style={{ width: '57.5%' }}></div></div>
        <div style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 8 }}>212.6 GB tersisa</div>
      </div>
    </aside>
  );
}

function NavItem({ icon, label, meta, active, onClick }) {
  return (
    <div className={'nav-item' + (active ? ' active' : '')} onClick={onClick}>
      <Icon name={icon} />
      <span className="nav-label">{label}</span>
      {meta && <span className="nav-meta">{meta}</span>}
    </div>
  );
}

/* ---------- TopBar ---------- */
function TopBar({ navigate, onMenu, route }) {
  return (
    <div className="topbar">
      <button className="icon-btn" onClick={onMenu} aria-label="Menu" style={{ display: 'none' }} data-mobile-menu>
        <Icon name="menu" />
      </button>
      <div className="search-wrap" onClick={() => navigate({ name: 'search' })}>
        <Icon name="search" />
        <input className="search-input" placeholder="Cari video, koleksi, atau tanggal…" readOnly />
        <kbd className="search-kbd">⌘K</kbd>
      </div>
      <div className="topbar-actions">
        <button className="icon-btn" title="Notifikasi"><Icon name="bell" /></button>
        <button className="btn" onClick={() => navigate({ name: 'upload' })}>
          <Icon name="upload" /> Upload
        </button>
        <div className="avatar">RA</div>
      </div>
    </div>
  );
}

/* ---------- Video card ---------- */
function VideoCard({ video, navigate }) {
  return (
    <div className="card" onClick={() => navigate({ name: 'player', id: video.id })}>
      <div className="card-thumb">
        <img src={video.thumb} alt={video.title} loading="lazy" />
        <span className="card-quality">{video.resolution}</span>
        <span className="card-duration">{video.duration}</span>
        <div className="card-play">
          <div><Icon name="play" /></div>
        </div>
      </div>
      <div className="card-meta">
        <div className="card-title">{video.title}</div>
        <div className="card-sub">
          <span>{video.views} kali ditonton</span>
          <span className="dot"></span>
          <span>{video.date}</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Section head ---------- */
function SectionHead({ title, meta, action }) {
  return (
    <div className="section-head">
      <h2>{title}</h2>
      {action ? action : meta ? <span className="meta">{meta}</span> : null}
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ video, navigate }) {
  if (!video) return null;
  return (
    <div className="hero">
      <img src={video.thumb} alt={video.title} />
      <div className="hero-grad"></div>
      <div className="hero-content">
        <div className="hero-eyebrow"><span className="pulse"></span> Lanjut tonton</div>
        <h1>{video.title}</h1>
        <div className="hero-meta">
          <span>{video.resolution}</span>
          <span className="dot"></span>
          <span>{video.duration}</span>
          <span className="dot"></span>
          <span>{video.size}</span>
          <span className="dot"></span>
          <span>{video.date}</span>
        </div>
        <p>{video.description}</p>
        <div className="hero-actions">
          <button className="btn btn-primary" onClick={() => navigate({ name: 'player', id: video.id })}>
            <Icon name="play" /> Putar
          </button>
          <button className="btn"><Icon name="heart" /> Favorit</button>
          <button className="btn"><Icon name="share" /> Bagikan</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Chip group ---------- */
function Chips({ items, value, onChange }) {
  return (
    <div className="chips">
      {items.map(it => (
        <button key={it.value} className={'chip' + (value === it.value ? ' active' : '')}
                onClick={() => onChange(it.value)}>
          {it.label}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { Icon, Sidebar, TopBar, VideoCard, Hero, SectionHead, Chips });