/* global React, Icon, Button, CatTag, CleFlag, Av, cx, UPCOMING_LIVE, VIDEOS */
// LPE Learning Center — Upcoming live webinars.

const { useState: useStateUp, useEffect: useEffectUp } = React;

function useCountdown(targetISO) {
  const [now, setNow] = useStateUp(Date.now());
  useEffectUp(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, new Date(targetISO).getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  return { days, hours, mins, secs, live: diff === 0 };
}

function fmtWhen(iso, tz) {
  const d = new Date(iso);
  const date = d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
  const time = d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
  return `${date} · ${time} ${tz}`;
}
function relatedLiveVideo(u, videos = window.VIDEOS) {
  const m = videos.find((v) => v.format === "webinar" && v.cats.some((c) => u.cats.includes(c)));
  return (m || videos[0] || {}).id;
}

function Countdown({ iso }) {
  const c = useCountdown(iso);
  if (c.live) return <div className="countdown"><div className="cd-cell"><div className="cd-v">LIVE</div><div className="cd-l">now</div></div></div>;
  const cells = [["Days", c.days], ["Hrs", c.hours], ["Min", c.mins], ["Sec", c.secs]];
  return (
    <div className="countdown">
      {cells.map(([l, v]) => (
        <div className="cd-cell" key={l}><div className="cd-v">{String(v).padStart(2, "0")}</div><div className="cd-l">{l}</div></div>
      ))}
    </div>
  );
}

function UpcomingCard({ u, registered, toggleRegister, onJoinLive, openSpeaker, onToast }) {
  const d = new Date(u.startISO);
  const isReg = registered.has(u.id);
  return (
    <article className="up-card">
      <div className="uc-date">
        <span className="uc-cal">
          <span className="m">{d.toLocaleDateString("en-US", { month: "short" })}</span>
          <span className="d">{d.getDate()}</span>
        </span>
        <div>
          <div className="uc-when"><b>{d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })} {u.timezone}</b> · {u.durLabel}</div>
          <div className="uc-when" style={{ marginTop: 3 }}>{u.attendees} registered</div>
        </div>
        {isReg ? <span className="registered-pill" style={{ marginLeft: "auto" }}><Icon name="check" size={11} /> Registered</span> : null}
      </div>
      <h4>{u.title}</h4>
      <p className="uc-sub">{u.sub}</p>
      <div className="vtags">{u.cats.map((c) => <CatTag key={c} id={c} />)}{u.cle.eligible ? <CleFlag cle={u.cle} /> : null}</div>
      <div className="uc-foot">
        <span className="who name-link" onClick={() => openSpeaker(u.speaker.name)}>
          <Av initials={u.speaker.initials} color={u.speaker.color} size={26} /> {u.speaker.name}
        </span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <Button variant="ghost" size="sm" icon="calendar" onClick={() => onToast("Added to your calendar (.ics)")}>Add</Button>
          <Button variant={isReg ? "secondary" : "primary"} size="sm" icon={isReg ? "check" : "plus"} onClick={() => toggleRegister(u.id)}>
            {isReg ? "Registered" : "Register"}
          </Button>
        </div>
      </div>
    </article>
  );
}

function UpcomingScreen({ registered, toggleRegister, onJoinLive, openSpeaker, onToast, videos = window.VIDEOS, videoMap = window.VIDEO_BY_ID, upcoming = window.UPCOMING_LIVE || [] }) {
  const featured = upcoming.find((u) => u.featured) || upcoming[0];
  const rest = upcoming.filter((u) => u && u.id !== (featured && featured.id));
  const isReg = featured && registered.has(featured.id);

  return (
    <div className="lc-page">
      <div className="page-header">
        <div className="ph-title">
          <div className="eyebrow">Upcoming live</div>
          <h1>Live webinars</h1>
          <p className="subtitle">Attend live for real-time Q&amp;A and the simplest path to CLE credit. Can't make it? Register anyway — we'll send the recording.</p>
        </div>
      </div>

      <div className="up-featured">
        <div className="uf-left">
          <div className="uf-eyebrow"><span className="live" />Next live session</div>
          <h2>{featured.title}</h2>
          <p className="uf-sub">{featured.sub}</p>
          <p className="uf-blurb">{featured.blurb}</p>
          <div className="vtags" style={{ marginBottom: 18 }}>{featured.cats.map((c) => <CatTag key={c} id={c} />)}{featured.cle.eligible ? <CleFlag cle={featured.cle} /> : null}</div>
          <div className="uf-actions">
            <Button variant={isReg ? "secondary" : "primary"} icon={isReg ? "check" : "plus"} onClick={() => toggleRegister(featured.id)}>
              {isReg ? "You're registered" : "Register"}
            </Button>
            <Button variant="ghost" icon="playFill" onClick={() => onJoinLive(relatedLiveVideo(featured, videos))}>Join when live</Button>
            <Button variant="ghost" icon="calendar" onClick={() => onToast("Added to your calendar (.ics)")}>Add to calendar</Button>
          </div>
        </div>
        <div className="uf-right">
          <div className="cd-lab">Starts in</div>
          <Countdown iso={featured.startISO} />
          <div className="uf-when">
            <span className="wr"><Icon name="calendar" size={14} />{fmtWhen(featured.startISO, featured.timezone)}</span>
            <span className="wr"><Icon name="clock" size={14} />{featured.durLabel} · {featured.cle.eligible ? `${featured.cle.credits.toFixed(1)} ${featured.cle.type} CLE` : "No credit"}</span>
            <span className="wr name-link" style={{ color: "rgba(255,255,255,0.85)" }} onClick={() => openSpeaker(featured.speaker.name)}><Icon name="user" size={14} />{featured.speaker.name}</span>
          </div>
        </div>
      </div>

      <div className="lc-section-head" style={{ marginTop: 0 }}><h2>Also scheduled</h2><span className="meta">{rest.length} sessions</span></div>
      <div className="up-grid">
        {rest.map((u) => (
          <UpcomingCard key={u.id} u={u} registered={registered} toggleRegister={toggleRegister} onJoinLive={onJoinLive} openSpeaker={openSpeaker} onToast={onToast} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { UpcomingScreen, useCountdown });