/* global React, Icon, Button, CatTag, VideoCard, cx, fmtLabel, VIDEOS, BIOS, CAT, UPCOMING_LIVE */
// LPE Learning Center — speaker profile.

function SpeakerScreen({ speakerName, onBack, saved, onSave, onOpen, openSpeaker, videos = window.VIDEOS, videoMap = window.VIDEO_BY_ID }) {
  const sessions = videos.filter((v) => v.speaker.name === speakerName)
    .sort((a, b) => new Date(b.date) - new Date(a.date));
  const sample = sessions[0] || videos.find((v) => v.speaker.name === speakerName);
  const upcoming = UPCOMING_LIVE.filter((u) => u.speaker.name === speakerName);

  if (!sample && !BIOS[speakerName]) {
    return (
      <div className="lc-page">
        <button className="player-back" onClick={onBack}><Icon name="chevLeft" size={14} /> Back</button>
        <div className="empty"><Icon name="user" size={28} /><h4>Speaker not found</h4><p>We couldn't find a profile for this speaker.</p></div>
      </div>
    );
  }

  const bio = BIOS[speakerName] || { role: sample.speaker.role, firm: "", bio: [], expertise: sample.cats };
  const totalMin = sessions.reduce((s, v) => s + v.duration, 0);
  const totalHours = (totalMin / 60).toFixed(1);
  const avgRating = sessions.length ? (sessions.reduce((s, v) => s + v.rating, 0) / sessions.length).toFixed(1) : "—";
  const attendees = sessions.reduce((s, v) => s + v.views, 0);
  const color = sample ? sample.speaker.color : "navy";
  const initials = sample ? sample.speaker.initials : speakerName.split(" ").map((w) => w[0]).slice(0, 2).join("");

  return (
    <div className="lc-page">
      <button className="player-back" onClick={onBack}><Icon name="chevLeft" size={14} /> Back</button>

      <div className="spk-hero">
        <span className={cx("spk-av", color)}>{initials}</span>
        <div>
          <h1 className="spk-name">{speakerName}</h1>
          <p className="spk-role"><b>{bio.role}</b>{bio.firm ? <> · {bio.firm}</> : null}</p>
          <div className="spk-bio">
            {bio.bio.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="spk-tags">
            {(bio.expertise || []).map((c) => CAT[c] ? <CatTag key={c} id={c} /> : null)}
            {bio.linkedin ? <span className="tag"><Icon name="globe" size={11} style={{ marginRight: 4, verticalAlign: "-1px" }} />LinkedIn</span> : null}
          </div>
        </div>
      </div>

      <div className="spk-stats">
        <div className="stat"><div className="stat-label">Sessions taught</div><div className="stat-value">{sessions.length}</div></div>
        <div className="stat"><div className="stat-label">Hours of content</div><div className="stat-value">{totalHours}</div></div>
        <div className="stat"><div className="stat-label">Average rating</div><div className="stat-value accent">{avgRating}</div></div>
        <div className="stat"><div className="stat-label">Total attendees</div><div className="stat-value">{attendees.toLocaleString()}</div></div>
      </div>

      {upcoming.length ? (
        <>
          <div className="lc-section-head" style={{ marginTop: 0 }}><h2>Upcoming live</h2></div>
          {upcoming.map((u) => (
            <div key={u.id} className="continue-row" style={{ cursor: "default", marginBottom: 12 }}>
              <div className="cthumb" style={{ width: 140 }}><Icon name="webinar" size={20} /></div>
              <div className="continue-info">
                <span className="code">{u.code} · {new Date(u.startISO).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</span>
                <h4>{u.title}</h4>
                <div className="vtags">{u.cats.map((c) => <CatTag key={c} id={c} />)}</div>
              </div>
              <Button variant="secondary" size="sm" icon="calendar" onClick={() => onOpen && null}>Live session</Button>
            </div>
          ))}
        </>
      ) : null}

      <div className="lc-section-head"><h2>Sessions by {speakerName.split(" ")[0]}</h2><span className="meta">{sessions.length} on demand</span></div>
      {sessions.length ? (
        <div className="lc-grid">
          {sessions.map((v) => <VideoCard key={v.id} v={v} saved={saved.has(v.id)} onSave={onSave} onOpen={onOpen} openSpeaker={openSpeaker} />)}
        </div>
      ) : (
        <div className="empty"><Icon name="video" size={26} /><h4>No on-demand sessions yet</h4><p>This speaker's recorded sessions will appear here.</p></div>
      )}
    </div>
  );
}

Object.assign(window, { SpeakerScreen });