/* ============================================================
   ADMIN · SHOWS — nightly stage rotation / production lineup
   ============================================================ */
function ShowsModule() {
  const t = useT(); const { lang } = useLang();
  const { SHOWS, SHOW_TYPES, STAGES, DANCERS } = window.PP;
  const [rows, setRows] = useState(() => SHOWS.map((s) => ({ ...s })));

  const advance = () => setRows((rs) => {
    const liveIdx = rs.findIndex((s) => s.status === "live");
    return rs.map((s, i) => {
      if (i === liveIdx) return { ...s, status: "done" };
      if (i === liveIdx + 1) return { ...s, status: "live" };
      return s;
    });
  });
  const live = rows.find((s) => s.status === "live");
  const upNext = rows.find((s) => s.status === "upcoming");
  const stName = (id) => { const s = STAGES.find((x) => x.id === id); return s ? L(s.name, lang) : id; };

  return (
    <div>
      {/* now playing / up next */}
      <div className="grid md:grid-cols-2 gap-3 mb-5">
        <div className="rounded-2xl border border-coral/40 bg-gradient-to-br from-coral/15 to-transparent p-5">
          <div className="label text-coral text-[10px] mb-2 flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-coral pulse-dot"></span>{t("On stage now", "En tarima ahora")}</div>
          {live ? <><div className="text-2xl font-black uppercase leading-none">{L(live.act, lang)}</div><div className="text-white/60 text-sm mt-1.5">{live.performer} · {stName(live.stage)} · {live.dur}min</div></> : <div className="text-white/40 text-lg">{t("Between sets", "Entre sets")}</div>}
        </div>
        <div className="rounded-2xl border border-white/12 bg-card p-5">
          <div className="label text-white/45 text-[10px] mb-2">{t("Up next", "Sigue")}</div>
          {upNext ? <><div className="text-2xl font-black uppercase leading-none">{L(upNext.act, lang)}</div><div className="text-white/60 text-sm mt-1.5">{upNext.performer} · {upNext.time}</div></> : <div className="text-white/40 text-lg">{t("End of lineup", "Fin del lineup")}</div>}
          <button onClick={advance} className="mt-4 w-full py-2.5 rounded-full bg-coral/15 border border-coral/40 text-coral text-[11px] font-bold uppercase tracking-wider hover:bg-coral hover:text-white transition-all flex items-center justify-center gap-2"><Icon name="skip-forward" className="w-4 h-4" />{t("Advance lineup", "Avanzar lineup")}</button>
        </div>
      </div>

      {/* timeline */}
      <div className="rounded-2xl border border-white/10 bg-card p-5 mb-5">
        <h3 className="text-sm font-black uppercase tracking-wide mb-4 flex items-center gap-2"><Icon name="list-music" className="w-4 h-4 text-coral" />{t("Tonight's lineup", "Lineup de hoy")}</h3>
        <div className="relative pl-6">
          <div className="absolute left-2 top-1 bottom-1 w-px bg-white/10"></div>
          <div className="space-y-3">
            {rows.map((s, i) => {
              const ty = SHOW_TYPES[s.type]; const done = s.status === "done"; const isLive = s.status === "live";
              return (
                <div key={i} className={"relative flex items-center gap-4 rounded-xl border p-3.5 transition-all " + (isLive ? "border-coral bg-coral/10" : done ? "border-white/8 bg-ink opacity-55" : "border-white/10 bg-ink")}>
                  <div className="absolute -left-[18px] w-3 h-3 rounded-full border-2" style={{ background: isLive ? ty.color : done ? "#0a0a0c" : "#0a0a0c", borderColor: ty.color }}></div>
                  <div className="text-center shrink-0 w-16"><div className="serif text-sm text-white leading-none">{s.time.replace(" ", "")}</div></div>
                  <div className="w-1.5 h-9 rounded-full shrink-0" style={{ background: ty.color }}></div>
                  <div className="flex-1 min-w-0"><div className="font-bold text-sm truncate">{L(s.act, lang)}</div><div className="text-white/45 text-xs">{s.performer} · {stName(s.stage)}</div></div>
                  <Chip color={ty.color}>{L(ty.label, lang)}</Chip>
                  <div className="hidden sm:block text-white/40 text-xs w-12 text-right">{s.dur}min</div>
                  {isLive ? <span className="text-coral text-[10px] font-bold uppercase w-16 text-right flex items-center justify-end gap-1"><span className="w-1.5 h-1.5 rounded-full bg-coral pulse-dot"></span>{t("Live", "Live")}</span>
                    : done ? <Icon name="check" className="w-4 h-4 text-green-400 w-16" /> : <span className="text-white/30 text-[10px] w-16 text-right">{t("Queued", "En cola")}</span>}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* stage availability + roster */}
      <div className="grid md:grid-cols-2 gap-4">
        <div className="rounded-2xl border border-white/10 bg-card p-5">
          <div className="label text-white/45 text-[10px] mb-3">{t("Stages", "Tarimas")}</div>
          <div className="space-y-2">
            {STAGES.map((st) => { const using = rows.find((s) => s.stage === st.id && s.status === "live"); return (
              <div key={st.id} className="flex items-center justify-between rounded-xl border border-white/10 bg-ink p-3"><span className="font-semibold text-sm">{L(st.name, lang)}</span>{using ? <Chip color="#FF6B5B">{using.performer}</Chip> : <Chip color="#5FBFA8">{t("Available", "Disponible")}</Chip>}</div>
            ); })}
          </div>
        </div>
        <div className="rounded-2xl border border-white/10 bg-card p-5">
          <div className="label text-white/45 text-[10px] mb-3">{t("Performers booked tonight", "Performers agendadas hoy")}</div>
          <div className="flex flex-wrap gap-2">
            {[...new Set(rows.flatMap((s) => s.performer.split(" + ")))].map((nm) => {
              const d = DANCERS.find((x) => x.name === nm); const on = d && d.status === "in";
              return <span key={nm} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-sm"><span className="w-1.5 h-1.5 rounded-full" style={{ background: on ? "#5FBFA8" : "#6b6b72" }}></span>{nm}</span>;
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ShowsModule });