// Controller sidebar + top mode bar
const { useState, useEffect, useRef, useMemo } = React;

function ModeBar({ mode, setMode, screens = [] }) {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const time = now.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
  const onlineScreens = screens.filter(s => s.status === "online").length;

  return (
    <div className="mode-bar">
      <div className="mode-bar__brand">
        <img src="assets/logo-elsia.png" alt="Elsia · Groupe ERI" className="mode-bar__brand-mark" />
        <span className="mode-bar__brand-divider" />
        <span className="mode-bar__brand-product">Régie d'affichage</span>
      </div>

      <span className="mode-bar__status">
        <span className="mode-bar__status-dot" style={{ background: onlineScreens > 0 ? undefined : "var(--text-muted)" }} />
        <span>{onlineScreens} écran{onlineScreens > 1 ? "s" : ""} actif{onlineScreens > 1 ? "s" : ""}</span>
      </span>
      <span style={{ fontSize: 12, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
        {time}
      </span>

      <div className="mode-bar__switcher">
        <button
          className={"mode-bar__tab" + (mode === "controller" ? " mode-bar__tab--active" : "")}
          onClick={() => setMode("controller")}
        >
          <Icon.LayoutDashboard /> Contrôleur
        </button>
        <button
          className={"mode-bar__tab" + (mode === "viewer" ? " mode-bar__tab--active" : "")}
          onClick={() => setMode("viewer")}
        >
          <Icon.Monitor /> Visionneuse
        </button>
      </div>

      <div className="mode-bar__user">
        <span>Alexis Pepers</span>
        <span className="mode-bar__user-avatar">AP</span>
      </div>
    </div>
  );
}

function Sidebar({ page, setPage, activePlaylist, setPlaylists, mediaFiles = [], screens = [] }) {
  const offlineCount = screens.filter(s => s.status === "offline").length;
  const items = [
    { id: "dashboard", label: "Tableau de bord", icon: Icon.LayoutDashboard },
    { id: "media", label: "Médiathèque", icon: Icon.Folder, badge: mediaFiles.length > 0 ? String(mediaFiles.length) : null },
    { id: "playlists", label: "Playlists", icon: Icon.Playlist },
    { id: "schedule", label: "Planning", icon: Icon.Calendar },
    { id: "screens", label: "Écrans", icon: Icon.Monitor, badge: screens.length > 0 ? String(screens.length) : null },
    { id: "stats", label: "Statistiques", icon: Icon.BarChart },
  ];

  // Compute current tile progress for active playlist (cycles through zone A items)
  const totalTiles = activePlaylist
    ? Object.values(activePlaylist.zones || {}).reduce((s, arr) => s + (arr?.length || 0), 0)
    : 0;

  const stopBroadcast = () => {
    if (!activePlaylist) return;
    setPlaylists(prev => prev.map(p => ({ ...p, active: false })));
  };

  return (
    <aside className="sidebar">
      <div className="sidebar__section">Régie</div>
      <nav className="sidebar__nav">
        {items.map(it => (
          <button
            key={it.id}
            className={"sidebar__item" + (page === it.id ? " sidebar__item--active" : "")}
            onClick={() => setPage(it.id)}
          >
            <it.icon />
            <span>{it.label}</span>
            {it.badge && <span className="sidebar__item-badge">{it.badge}</span>}
          </button>
        ))}
      </nav>

      <div className="sidebar__section" style={{ marginTop: 8 }}>Système</div>
      <nav className="sidebar__nav">
        <button className="sidebar__item">
          <Icon.Bell /><span>Alertes</span>
          {offlineCount > 0 && (
            <span className="sidebar__item-badge" style={{ color: "var(--danger)", fontWeight: 600 }}>{offlineCount}</span>
          )}
        </button>
        <button
          className={"sidebar__item" + (page === "settings" ? " sidebar__item--active" : "")}
          onClick={() => setPage("settings")}
        >
          <Icon.Settings /><span>Paramètres</span>
        </button>
      </nav>

      <div className="sidebar__footer">
        {activePlaylist ? (
          <div className="sidebar__broadcast-card">
            <div className="sidebar__broadcast-label">
              <span className="sidebar__broadcast-dot" />
              En diffusion
            </div>
            <div className="sidebar__broadcast-title">{activePlaylist.name}</div>
            <div className="sidebar__broadcast-meta">{totalTiles} tuile{totalTiles > 1 ? "s" : ""} · {activePlaylist.schedule}</div>
            <div className="sidebar__broadcast-actions">
              <button className="btn btn--sm btn--icon" onClick={() => setPage("playlists")} title="Détails"><Icon.Eye size={11} /></button>
              <button className="btn btn--sm btn--danger btn--icon" onClick={stopBroadcast} title="Arrêter"><Icon.Pause size={11} /></button>
              <button className="btn btn--sm" style={{ marginLeft: "auto" }} onClick={() => setPage("playlists")}>
                Détails
              </button>
            </div>
          </div>
        ) : (
          <div className="sidebar__broadcast-card" style={{ background: "transparent", border: "1px dashed var(--border)" }}>
            <div className="sidebar__broadcast-label" style={{ color: "var(--text-faint)" }}>
              <Icon.Pause size={10} /> Aucune diffusion
            </div>
            <div className="sidebar__broadcast-meta" style={{ marginTop: 4 }}>Lancez une playlist depuis le menu Playlists.</div>
            <div className="sidebar__broadcast-actions">
              <button className="btn btn--sm btn--primary" style={{ marginLeft: "auto" }} onClick={() => setPage("playlists")}>
                <Icon.Play size={11} /> Lancer
              </button>
            </div>
          </div>
        )}
        <div className="sidebar__credit">
          <div>Développé avec <span className="sidebar__credit-heart">❤️</span> par <strong>Alexis Pepers</strong></div>
          <div>Technicien mise en service · Développeur à mi-temps</div>
        </div>
      </div>
    </aside>
  );
}

window.ModeBar = ModeBar;
window.Sidebar = Sidebar;