// widgets.jsx — sidebar widgets, banners, hit counter, marquees.

function Widget({ title, children, variant, closable, padding }) {
  return (
    <div className="widget">
      <div className={'widget-title' + (variant ? ' ' + variant : '')}>
        <span>{title}</span>
        {closable !== false ? <span className="x">×</span> : null}
      </div>
      <div className={'widget-body' + (padding === 'tight' ? ' tight' : '')}>
        {children}
      </div>
    </div>
  );
}

function MenuList({ items, active, onPick }) {
  return (
    <ul className="menu-list">
      {items.map((it) => (
        <li
          key={it.id}
          className={active === it.id ? 'active' : ''}
          onClick={() => onPick && onPick(it.id)}
        >{it.label}{it.count != null ? <span style={{float: 'right', color: '#666', fontWeight: 400}}> {it.count}</span> : null}</li>
      ))}
    </ul>
  );
}

function CategoryWidget({ active, onPick }) {
  const catalog = window.DSD_CATALOG || [];
  const labels  = window.DSD_KIND_LABEL || {};
  const counts  = catalog.reduce((acc, p) => {
    acc[p.kind] = (acc[p.kind] || 0) + 1;
    return acc;
  }, {});
  const order = ['jacheta', 'hanorac', 'tricou', 'sapca', 'accesoriu', 'pachet', 'cd'];
  const items = [
    { id: 'all', label: 'Toate produsele', count: catalog.length },
    ...order
      .filter((k) => counts[k])
      .map((k) => ({ id: k, label: labels[k] || k, count: counts[k] })),
  ];
  return (
    <Widget title="Catalog">
      <MenuList items={items} active={active} onPick={onPick} />
    </Widget>
  );
}

function NavWidget({ page, onPage }) {
  const items = [
    { id: 'home',     label: '↺ Pagina principală' },
    { id: 'releases', label: '★ Discografie' },
    { id: 'news',     label: '☼ Știri / actualizări' },
    { id: 'media',    label: '♪ Audio + Video' },
    { id: 'clan',     label: '◊ Clanul Mistic' },
    { id: 'about',    label: '? Despre SJS' },
    { id: 'cart',     label: '▌ Coșul tău' },
  ];
  return (
    <Widget title="Navigare rapidă">
      <MenuList items={items} active={page} onPick={onPage} />
    </Widget>
  );
}

function SearchWidget({ onSearch }) {
  const [q, setQ] = React.useState('');
  return (
    <Widget title="Caută în catalog">
      <form onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(q); }}>
        <input
          className="field"
          placeholder="ex. CD, hanorac, mistic..."
          value={q}
          onChange={(e) => setQ(e.target.value)}
        />
        <div className="row" style={{marginTop: 6, justifyContent: 'space-between'}}>
          <label style={{fontSize: 10}}><input type="checkbox" defaultChecked /> doar în stoc</label>
          <button className="btn" type="submit">Caută</button>
        </div>
      </form>
    </Widget>
  );
}

function MembersWidget({ onLogin }) {
  return (
    <Widget title="Clanul Mistic" variant="alt">
      <div style={{textAlign: 'center'}}>
        <div style={{fontFamily: 'var(--font-poster)', fontSize: 14, color: 'var(--dsd-blood)', letterSpacing: '0.04em'}}>MEMBRI</div>
        <div style={{fontSize: 10, color: '#000', margin: '4px 0 8px'}}>Acces la lansări înainte de stocul public + reduceri.</div>
      </div>
      <div className="col">
        <input className="field" placeholder="utilizator" />
        <input className="field" type="password" placeholder="parolă" />
        <div className="row" style={{justifyContent: 'space-between'}}>
          <label style={{fontSize: 10}}><input type="checkbox" /> ține-mă conectat</label>
          <button className="btn primary" onClick={(e) => { e.preventDefault(); onLogin && onLogin(); }}>Intră</button>
        </div>
        <div style={{fontSize: 10, marginTop: 4}}>
          <a>Înregistrare</a> · <a>Parola pierdută?</a>
        </div>
      </div>
    </Widget>
  );
}

function CDRomOffer() {
  return (
    <Widget title="OFERTĂ SPECIALĂ" variant="alt">
      <div className="cdrom-offer">
        <div className="cdrom-offer-inner">
          <div style={{display: 'flex', justifyContent: 'center', marginBottom: 4}}>
            <div className="hero-cd" style={{width: 56, height: 56, transform: 'scale(1)'}}></div>
          </div>
          <h5>CD-ROM GRATIS!</h5>
          <p>
            <b>SJS-MIX-08</b> — un mixtape de 14 piese inedite + clipuri QuickTime + screensaver.
          </p>
          <p style={{fontFamily: 'var(--font-mono)', fontSize: 10}}>
            Doar pentru membri Clanul Mistic. Înscrie-te azi.
          </p>
          <button className="btn primary full">
            ► Cere CD-ul <span className="blink">_</span>
          </button>
          <div style={{fontSize: 9, color: '#666', marginTop: 4}}>+ taxe poștă · stoc 250.</div>
        </div>
      </div>
    </Widget>
  );
}

function StreamPanel() {
  return (
    <Widget title="STREAM RealAudio" variant="toxic">
      <div className="player">
        <div className="row" style={{justifyContent: 'space-between', marginBottom: 4}}>
          <span style={{color: '#FF6633'}}>► PLAY</span>
          <span style={{color: '#33FF33', fontSize: 12}}>28.8</span>
        </div>
        <div style={{fontSize: 12, color: '#FFCC33', marginBottom: 4}}>
          SJS — CLANUL MISTIC
        </div>
        <div style={{fontSize: 10, color: '#33FF33', marginBottom: 4}}>
          piesa 03 / 4:02
        </div>
        <div className="row" style={{marginBottom: 4}}>
          <span>♪</span><div className="meter"></div><span style={{fontSize: 10}}>1:32</span>
        </div>
        <div className="row" style={{justifyContent: 'space-between', fontSize: 10}}>
          <span>VOL ▌▌▌▌▌▌▌░░░</span>
          <span style={{color: '#FF3333'}}>● REC</span>
        </div>
      </div>
      <div style={{fontSize: 10, marginTop: 6, color: '#000'}}>
        <b>Necesită:</b> RealPlayer 5.0+. Recomandat conexiune <b>28.8k</b> sau ISDN.
      </div>
      <div className="row" style={{marginTop: 6, gap: 4}}>
        <button className="btn" style={{flex: 1, fontSize: 9}}>QuickTime</button>
        <button className="btn" style={{flex: 1, fontSize: 9}}>RealAudio</button>
        <button className="btn" style={{flex: 1, fontSize: 9}}>MP3</button>
      </div>
    </Widget>
  );
}

function HitCounter({ value }) {
  const v = String(value || 47892).padStart(7, '0').split('');
  return (
    <Widget title="Vizitatori" padding="tight">
      <div style={{textAlign: 'center'}}>
        <div className="counter" style={{margin: '0 auto'}}>
          {v.map((d, i) => <div key={i} className="counter-digit">{d}</div>)}
        </div>
        <div style={{fontSize: 9, marginTop: 4, color: '#000'}}>
          since 12.MAR.1996<br/>
          tu ești vizitatorul <b>#{v.join('')}</b>
        </div>
      </div>
    </Widget>
  );
}

function CountryWidget({ value, onChange, countries }) {
  return (
    <Widget title="Livrare către">
      <select className="field" value={value} onChange={(e) => onChange && onChange(e.target.value)}>
        {countries.map((c) => <option key={c} value={c}>{c}</option>)}
      </select>
      <div style={{fontSize: 10, marginTop: 6, color: '#000'}}>
        Livrare standard <b>5—9 zile</b>. Livrare rapidă (DHL) +25 RON.
      </div>
      <div className="row" style={{marginTop: 6, gap: 4, fontSize: 9}}>
        <span style={{padding: '1px 4px', background: '#0A0A0A', color: 'var(--dsd-hazard)'}}>RON</span>
        <span style={{padding: '1px 4px', boxShadow: 'var(--bevel-thin-in)', background: '#fff'}}>EUR</span>
        <span style={{padding: '1px 4px', boxShadow: 'var(--bevel-thin-in)', background: '#fff'}}>USD</span>
      </div>
    </Widget>
  );
}

function NewsletterWidget() {
  return (
    <Widget title="Newsletter SJS">
      <p style={{margin: '0 0 6px', fontSize: 11}}>
        Anunțuri lansări, concerte, restocuri. Maxim 1 email/lună. Fără spam.
      </p>
      <input className="field" placeholder="email@ex.ro" style={{marginBottom: 4}} />
      <button className="btn full">Înscrie-mă</button>
      <div style={{fontSize: 9, marginTop: 4, color: '#666'}}>
        467 abonați · arhivă <a>aici</a>.
      </div>
    </Widget>
  );
}

function WebringWidget() {
  return (
    <Widget title="RO Rap WebRing">
      <div style={{textAlign: 'center'}}>
        <div style={{fontFamily: 'var(--font-mono)', fontSize: 10, color: '#000', marginBottom: 6}}>
          Acest site face parte din<br/>
          <b>Romanian Hip-Hop WebRing</b><br/>
          (membru #047)
        </div>
        <div className="row" style={{justifyContent: 'center', gap: 2}}>
          <button className="btn" style={{minHeight: 18, fontSize: 9, padding: '2px 6px'}}>◄ Anterior</button>
          <button className="btn" style={{minHeight: 18, fontSize: 9, padding: '2px 6px'}}>Random</button>
          <button className="btn" style={{minHeight: 18, fontSize: 9, padding: '2px 6px'}}>Următor ►</button>
        </div>
        <div style={{fontSize: 9, marginTop: 6}}>
          <a>Listă completă</a> · <a>Înscrie-ți site-ul</a>
        </div>
      </div>
    </Widget>
  );
}

function PollWidget() {
  const [vote, setVote] = React.useState(null);
  const opts = [
    { id: 'a', label: 'Floarea Înghețată', pct: 38 },
    { id: 'b', label: 'Din Adâncurile Sudului', pct: 24 },
    { id: 'c', label: 'Clanul Mistic', pct: 31 },
    { id: 'd', label: 'Deasupra Jegului', pct: 7 },
  ];
  return (
    <Widget title="Sondaj săptămânal">
      <div style={{fontSize: 11, fontWeight: 700, marginBottom: 6}}>
        Care e cel mai bun LP SJS până acum?
      </div>
      {vote == null ? (
        <div className="col" style={{gap: 3}}>
          {opts.map((o) => (
            <label key={o.id} style={{fontSize: 10, cursor: 'pointer'}}>
              <input type="radio" name="poll" onChange={() => {}} /> {o.label}
            </label>
          ))}
          <button className="btn" style={{marginTop: 4}} onClick={() => setVote(true)}>Votează</button>
        </div>
      ) : (
        <div className="col" style={{gap: 4}}>
          {opts.map((o) => (
            <div key={o.id}>
              <div style={{fontSize: 10, display: 'flex', justifyContent: 'space-between'}}>
                <span>{o.label}</span><span><b>{o.pct}%</b></span>
              </div>
              <div style={{height: 8, background: '#fff', boxShadow: 'var(--bevel-thin-in)'}}>
                <div style={{
                  width: o.pct + '%', height: '100%',
                  background: 'repeating-linear-gradient(90deg, var(--dsd-blood) 0 4px, #6F1A12 4px 6px)',
                }}></div>
              </div>
            </div>
          ))}
          <div style={{fontSize: 9, color: '#666'}}>1,847 voturi · expiră în 2 zile</div>
        </div>
      )}
    </Widget>
  );
}

function ConstructionBox() {
  return (
    <div className="under-construction">
      <div>
        ⚠ ZONĂ ÎN CONSTRUCȚIE ⚠<br/>
        <span style={{fontWeight: 400, fontSize: 9}}>Secțiunea Audio/Video deschisă în NOI.1998</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  Widget, MenuList, CategoryWidget, NavWidget, SearchWidget, MembersWidget,
  CDRomOffer, StreamPanel, HitCounter, CountryWidget, NewsletterWidget,
  WebringWidget, PollWidget, ConstructionBox,
});