// Product screens rebuilt from the Vernal UI kit (Visual Design — Light/Dark).
// Geometry + type come from the .fig; icons come from console/icons/icon-data.window.js.

// ---------- shared chrome ----------
function TopBar({ title, sub, greet, right }) {
  return <div className="topbar">
    {greet
      ? <div className="tb-text"><b>Good morning, {KIT.user.greet} ☀</b><span>Nice to see you</span></div>
      : <div className="tb-text"><b>{title}</b>{sub && <span>{sub}</span>}</div>}
    <div className="filters">{right}</div>
  </div>;
}

function TopBarStd({ title, sub, greet }) {
  return <TopBar title={title} sub={sub} greet={greet} right={<>
    <div className="tb-search"><Icon n="search" s={16}/><input placeholder="Search…"/><span className="ks"><kbd>⌘</kbd><kbd>F</kbd></span></div>
    <button className="ibtn" title="Notifications"><Icon n="bell" s={18}/></button>
    <button className="btn-line"><Icon n="chat" s={16}/>Talk to Kapllan</button>
    <button className="btn-dark" onClick={() => window.dispatchEvent(new CustomEvent('kap:add-review'))}><Icon n="plus" s={16}/>Add review</button>
  </>}/>;
}

// =======================================================================
// VOICE BANK  (Explore Voices)
// =======================================================================
function VoiceBankView({ play, onPlay, toast }) {
  const [q, setQ] = React.useState('');
  const [filt, setFilt] = React.useState('All');
  const [sel, setSel] = React.useState(null);
  const [mode, setMode] = React.useState('grid');
  const [page, setPage] = React.useState(1);

  const rows = KIT.bank.filter(v => {
    const hit = (v.name + ' ' + v.role + ' ' + v.lang + ' ' + v.accent + ' ' + v.tags.join(' ')).toLowerCase();
    if (q && !hit.includes(q.toLowerCase())) return false;
    if (filt !== 'All' && !v.tags.includes(filt) && !(filt === 'Cloned' && v.owner === 'Voice Lab')) return false;
    return true;
  });

  const stateBadge = s => s === 'ready' ? <span className="badge green"><Icon n="check" s={11}/>Ready</span>
    : s === 'training' ? <span className="badge amber">Training</span>
    : <span className="badge gray">Queued</span>;

  const isOn = id => play && play.id === id && play.playing;
  const frac = id => (play && play.id === id && play.dur) ? play.t / play.dur : 0;
  const clock = s => `${String(Math.floor(s / 60)).padStart(1, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`;

  // page-level right sidebar: any voice or donation can push its detail here
  const [detail, setDetail] = React.useState(null);
  React.useEffect(() => {
    const h = e => setDetail(e.detail);
    window.addEventListener('kap:voice-detail', h);
    return () => window.removeEventListener('kap:voice-detail', h);
  }, []);

  return <div className="view">
    <TopBarStd greet/>
    <div className={'vb-shell' + (detail ? ' with-detail' : '')}>
    <div className="scroll">
      <DonateSection toast={toast}/>
      <div className="kcard">
        <div className="kcard-h">
          <div className="kh-t"><b>Voice bank</b><span className="sub">{KIT.bank.length} registered identities · consent receipt on file for every clone.</span></div>
          <div className="ha">
            <div className="seg">
              <button className={mode === 'grid' ? 'on' : ''} onClick={() => setMode('grid')}>Grid</button>
              <button className={mode === 'list' ? 'on' : ''} onClick={() => setMode('list')}>List</button>
            </div>
            <button className="btn-line sm"><Icon n="filter" s={15}/>Filter</button>
            <button className="btn-green sm"><Icon n="plus" s={15}/>Add voice</button>
          </div>
        </div>

        <div className="searchrow"><Icon n="search" s={16}/><input placeholder="Search voices, accents, attributes…" value={q} onChange={e => setQ(e.target.value)}/><span className="ks"><kbd>⌘</kbd><kbd>K</kbd></span></div>

        <div className="row" style={{ gap: 6, flexWrap: 'wrap' }}>
          {KIT.bankFilters.map(f => <button key={f} className={'lane-pill' + (filt === f ? ' on' : '')} onClick={() => setFilt(f)}>{f}</button>)}
        </div>

        {mode === 'grid'
          ? <div className="vb-grid">
              {rows.map(v => <div key={v.id} className={'vb-card' + (sel === v.id ? ' on' : '') + (isOn(v.id) ? ' playing' : '')}
                onClick={() => { setSel(v.id); window.dispatchEvent(new CustomEvent('kap:voice-detail', { detail: {
                  kind: 'voice', title: v.name, script: v.desc, dur: v.dur + 's', lang: v.lang, seed: v.seed, id: v.id
                } })); }}>
                <div className="vb-inner">
                <div className="vb-top">
                  <div className="vb-t"><b>{v.name}</b><span>{v.role}</span></div>
                  {stateBadge(v.state)}
                </div>
                <div className="vb-desc">{v.desc}</div>
                <div className="vb-wave" onClick={e => { e.stopPropagation(); onPlay && onPlay(v, true); }} title="Scrub">
                  <CellWave seed={v.seed} w={232} h={26} played={frac(v.id)}/>
                </div>
                <div className="vb-tags">
                  <span className="badge">{v.lang}</span>
                  <span className="badge">{v.g} · {v.age}</span>
                  {v.tags.slice(0, 1).map(t => <span key={t} className="badge">{t}</span>)}
                </div>
                <div className="vb-foot">
                  <span className="vf-m">{isOn(v.id)
                    ? <span className="vf-now"><span className="eqbar"><i></i><i></i><i></i></span>{clock(play.t)} / {clock(v.dur)}</span>
                    : <>{v.uses.toLocaleString('en-US')} uses · ★ {v.rate}</>}</span>
                  <button className="ibtn sm plain" title="More" onClick={e => e.stopPropagation()}><Icon n="more" s={16}/></button>
                  <button className={'playmini' + (isOn(v.id) ? ' on' : '')} title={isOn(v.id) ? 'Pause' : 'Play sample'} onClick={e => { e.stopPropagation(); onPlay && onPlay(v); }}>
                    <Icon n={isOn(v.id) ? 'pause' : 'play'} s={11}/>
                  </button>
                </div>
                </div>
              </div>)}
            </div>
          : <div className="ktable">
              <div className="kt-h kt-bank">
                <Cbx/><span>Name &amp; description</span><span className="hide-lg">Voice</span><span className="hide-md">Sample</span><span className="hide-lg">Language</span><span className="hide-lg">Uses</span><span style={{ textAlign: 'right' }}>Actions</span>
              </div>
              {rows.map(v => <div key={v.id} className={'kt-r kt-bank' + (sel === v.id ? ' on' : '')} onClick={() => setSel(v.id)}>
                <Cbx on={sel === v.id} onChange={() => setSel(sel === v.id ? null : v.id)}/>
                <div className="kt-name">
                  <div className="kt-txt"><b>{v.name}</b><span>{v.desc}</span></div>
                </div>
                <div className="kt-cell hide-lg">{stateBadge(v.state)}</div>
                <div className="kt-cell hide-md"><CellWave seed={v.seed} w={80} h={20} played={frac(v.id)}/><span className="num">{isOn(v.id) ? clock(play.t) : v.dur + 's'}</span></div>
                <div className="kt-cell hide-lg"><span className="num">{v.lang}</span></div>
                <div className="kt-cell hide-lg"><span className="num">{v.uses.toLocaleString('en-US')}</span></div>
                <div className="kt-acts">
                  <button className={'playmini' + (isOn(v.id) ? ' on' : '')} title={isOn(v.id) ? 'Pause' : 'Play sample'} onClick={e => { e.stopPropagation(); onPlay && onPlay(v); }}><Icon n={isOn(v.id) ? 'pause' : 'play'} s={10}/></button>
                  <button className="ibtn sm plain" onClick={e => e.stopPropagation()}><Icon n="pencil" s={15}/></button>
                </div>
              </div>)}
              {!rows.length && <div className="empty">No voice matches “{q}”.</div>}
            </div>}

        <Pager page={page} total={2} per={12} onPage={setPage}/>
      </div>
    </div>

    {detail && <aside className="vb-detail">
      <div className="vd-h">
        <div><b>{detail.title}</b><span>{detail.kind === 'donation' ? 'Donated take' : 'Bank voice'}</span></div>
        <button className="ibtn sm plain" onClick={() => setDetail(null)} title="Close"><Icon n="close" s={16}/></button>
      </div>
      {detail.script && <p className="vd-s">{detail.script}</p>}
      <div className="vd-wave"><MiniWave seed={detail.seed || 7} played={0}/></div>
      <dl className="dd-kv">
        <div><dt>Duration</dt><dd>{detail.dur}</dd></div>
        <div><dt>Language</dt><dd>{detail.lang}</dd></div>
        {detail.at && <div><dt>Recorded</dt><dd>{detail.at}</dd></div>}
        <div><dt>Consent</dt><dd className="ok">Signed</dd></div>
      </dl>
      <div className="dd-a">
        <button className="btn-line sm"><Icon n="play" s={13}/>Play</button>
        <button className="btn-line sm"><Icon n="download" s={13}/>Export</button>
      </div>
      <div className="pop-note" style={{ marginTop: 'auto' }}>
        <Icon n="shield" s={15}/>Attributed to the speaker. Withdrawable at any time.
      </div>
    </aside>}
    </div>
  </div>;
}

// =======================================================================
// VOICE ISOLATOR  (history table)
// =======================================================================
// REVIEW STUDIO  (tabs + big wave + generated list)
Object.assign(window, { TopBar, TopBarStd, VoiceBankView });