/* global React, Icon, Button, VideoCard, cx, VIDEOS, VIDEO_BY_ID */
// LPE Learning Center — Saved sessions.

const { useState: useStateSaved } = React;

function SavedScreen({ saved, onSave, onOpen, onNavigate, openSpeaker, videos = window.VIDEOS, videoMap = window.VIDEO_BY_ID }) {
  const [fmt, setFmt] = useStateSaved("all");
  const list = [...saved].map((id) => videoMap[id]).filter(Boolean);
  const shown = fmt === "all" ? list : list.filter((v) => v.format === fmt);

  return (
    <div className="lc-page">
      <div className="page-header">
        <div className="ph-title">
          <div className="eyebrow">Saved</div>
          <h1>Saved for later</h1>
          <p className="subtitle">Sessions you've bookmarked. They stay here until you remove them — tap the bookmark on any session to add it.</p>
        </div>
        <div className="header-actions">
          <Button variant="primary" icon="video" onClick={() => onNavigate("library")}>Browse library</Button>
        </div>
      </div>

      {list.length === 0 ? (
        <div className="empty">
          <Icon name="bookmark" size={28} />
          <h4>Nothing saved yet</h4>
          <p>Tap the bookmark on any session to save it for later. Saved sessions show up here.</p>
          <div style={{ marginTop: 16 }}>
            <Button variant="secondary" icon="video" onClick={() => onNavigate("library")}>Go to library</Button>
          </div>
        </div>
      ) : (
        <>
          <div className="lc-toolbar">
            <div className="lc-chiprow">
              {[["all", "All"], ["webinar", "Webinars"], ["tutorial", "Tutorials"], ["session", "Sessions"]].map(([id, lab]) => {
                const ct = id === "all" ? list.length : list.filter((v) => v.format === id).length;
                return (
                  <button key={id} className={cx("lc-chip", fmt === id && "active")} onClick={() => setFmt(id)}>
                    {lab} <span className="ct">{ct}</span>
                  </button>
                );
              })}
            </div>
          </div>
          <p className="lc-results"><b>{shown.length}</b> saved {shown.length === 1 ? "session" : "sessions"}</p>
          {shown.length === 0 ? (
            <div className="empty"><Icon name="bookmark" size={26} /><h4>None of this format saved</h4><p>Switch the filter to see your other saved sessions.</p></div>
          ) : (
            <div className="lc-grid">
              {shown.map((v) => <VideoCard key={v.id} v={v} saved={saved.has(v.id)} onSave={onSave} onOpen={onOpen} openSpeaker={openSpeaker} />)}
            </div>
          )}
        </>
      )}
    </div>
  );
}

Object.assign(window, { SavedScreen });