// Dashboard — overview page
const { MEDIA_FILES: DASH_MEDIA, PLAYLISTS: DASH_PL, SCREENS: DASH_SCREENS, ACTIVITY: DASH_ACT } = window.DATA;

function Kpi({ label, value, sub, trend, icon: I }) {
  return (
    <div className="kpi">
      <div className="kpi__top">
        <div className="kpi__label">{label}</div>
        {I && <I size={14} />}
      </div>
      <div className="kpi__value">{value}</div>
      <div className="kpi__sub">
        {trend && <span className={"kpi__trend kpi__trend--" + (trend.dir || "up")}>
          {trend.dir === "down" ? "↓" : "↑"} {trend.value}
        </span>}
        <span>{sub}</span>
      </div>
    </div>
  );
}

function MiniViewer({ activePlaylist }) {
  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" });

  if (!activePlaylist) {
    return (
      <div className="mini-viewer mini-viewer--standby">
        <div className="mini-viewer__standby">
          <img src="assets/logo-elsia.png" alt="" style={{ height: 26, opacity: 0.4, filter: "brightness(1.15)" }} />
          <div style={{ fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 600, color: "rgba(255,255,255,0.7)", marginTop: 10 }}>
            Aucune diffusion
          </div>
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", marginTop: 2 }}>Écran en veille</div>
        </div>
        <div className="mini-viewer__overlay-tr"><span className="mono">{time}</span></div>
      </div>
    );
  }

  // Layout helper
  const VIEWER_LAYOUTS = {
    full:      { cols: "1fr", rows: "1fr", zones: ["A"] },
    "split-h": { cols: "1fr 1fr", rows: "1fr", zones: ["A", "B"] },
    "split-v": { cols: "1fr", rows: "1fr 1fr", zones: ["A", "B"] },
    "main-side": { cols: "2fr 1fr", rows: "1fr 1fr", zones: ["A", "B", "C"], spans: { A: "1 / 1 / 3 / 2" } },
    quad:      { cols: "1fr 1fr", rows: "1fr 1fr", zones: ["A", "B", "C", "D"] },
    main3:     { cols: "2fr 1fr", rows: "2fr 1fr 1fr", zones: ["A", "B", "C", "D"], spans: { A: "1 / 1 / 3 / 2", B: "1 / 2 / 2 / 3", C: "2 / 2 / 3 / 3", D: "3 / 1 / 4 / 3" } },
  };
  const lay = VIEWER_LAYOUTS[activePlaylist.layout] || VIEWER_LAYOUTS.quad;

  // Mini renderer per type
  const renderMiniTile = (item, zone) => {
    if (!item) return (
      <div key={zone} className="mini-viewer__tile" style={{ background: "#0F1421", gridArea: lay.spans?.[zone] || "auto", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.3)", fontSize: 9 }}>
        Zone {zone} vide
      </div>
    );
    if (item.type === "kpi" || item.type === "xls") {
      return (
        <div key={zone} className="mini-viewer__tile" style={{ background: "#1A1F2C", gridArea: lay.spans?.[zone] || "auto", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, padding: 6, textAlign: "center" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 700, color: "#fff", lineHeight: 1, letterSpacing: "-0.03em" }}>247</div>
          <div style={{ fontSize: 7, color: "rgba(255,255,255,0.45)", lineHeight: 1.2 }}>{item.title.slice(0, 24)}</div>
        </div>
      );
    }
    if (item.type === "img" || item.type === "vid" || item.type === "yt") {
      return (
        <div key={zone} className="mini-viewer__tile" style={{ gridArea: lay.spans?.[zone] || "auto", background: "linear-gradient(180deg, #34384A 0%, #1A1F2C 100%)", position: "relative" }}>
          {(item.type === "vid" || item.type === "yt") && (
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={{ width: 22, height: 22, borderRadius: "50%", background: "rgba(255,255,255,0.95)", color: "#0A0E17", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon.Play size={11} />
              </div>
            </div>
          )}
          <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "6px 8px", background: "linear-gradient(0deg, rgba(0,0,0,0.8), transparent)", fontSize: 8, color: "#fff", fontWeight: 500 }}>
            {item.title.slice(0, 30)}
          </div>
        </div>
      );
    }
    if (item.type === "soc") {
      return (
        <div key={zone} className="mini-viewer__tile" style={{ background: "#0F1825", gridArea: lay.spans?.[zone] || "auto", padding: 8, display: "flex", flexDirection: "column", gap: 3 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 8, color: "#7DD3FC", fontWeight: 600 }}>
            <Icon.Linkedin size={9} /> @elsia
          </div>
          <div style={{ fontSize: 8, color: "rgba(255,255,255,0.85)", lineHeight: 1.3 }}>
            « Nous sommes fiers d'avoir livré le pont d'Aturri… »
          </div>
        </div>
      );
    }
    if (item.type === "met") {
      return (
        <div key={zone} className="mini-viewer__tile" style={{ background: "linear-gradient(135deg, #0F2030, #061018)", gridArea: lay.spans?.[zone] || "auto", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 3, color: "rgba(255,255,255,0.7)" }}>
          <Icon.Sun size={20} style={{ color: "#FFD24A" }} />
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: "#fff", lineHeight: 1 }}>21°</div>
          <div style={{ fontSize: 8, color: "rgba(255,255,255,0.5)" }}>Bordeaux</div>
        </div>
      );
    }
    // Default: slide / text / pdf / ppt
    return (
      <div key={zone} className="mini-viewer__tile" style={{ background: "#131826", gridArea: lay.spans?.[zone] || "auto", padding: 10, display: "flex", flexDirection: "column", gap: 3 }}>
        <div style={{ fontSize: 7, color: "rgba(245,184,66,0.7)", letterSpacing: 0.5, fontWeight: 600, textTransform: "uppercase" }}>
          {item.type === "pdf" ? "Document" : item.type === "ppt" ? "Présentation" : "Annonce"}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 600, color: "#fff", lineHeight: 1.15, letterSpacing: "-0.01em", overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical" }}>
          {item.title.replace(/\.(pdf|pptx|key)$/i, "")}
        </div>
      </div>
    );
  };

  return (
    <div className="mini-viewer" style={{ gridTemplateColumns: lay.cols, gridTemplateRows: lay.rows }}>
      {lay.zones.map(z => renderMiniTile(activePlaylist.zones?.[z]?.[0], z))}
      <div className="mini-viewer__overlay-tl">
        <img src="assets/logo-elsia.png" alt="" style={{ height: 13, opacity: 0.9, filter: "brightness(1.2)" }} />
      </div>
      <div className="mini-viewer__overlay-tr">
        <span className="mono">{time}</span>
      </div>
    </div>
  );
}

function ActivityIcon({ type }) {
  const map = {
    upload: { I: Icon.Upload, c: "var(--info)" },
    play: { I: Icon.Play, c: "var(--success)" },
    schedule: { I: Icon.Calendar, c: "#7C3AED" },
    publish: { I: Icon.Broadcast, c: "var(--elsia-navy)" },
    alert: { I: Icon.AlertTriangle, c: "var(--danger)" },
    pause: { I: Icon.Pause, c: "var(--text-muted)" },
  };
  const m = map[type] || map.upload;
  return (
    <span style={{
      width: 22, height: 22, borderRadius: 5,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      background: "var(--bg-subtle)",
      border: "1px solid var(--border)",
      color: m.c,
      flexShrink: 0,
    }}>
      <m.I size={11} />
    </span>
  );
}

function Dashboard({ playlists = [], activePlaylist, mediaFiles = [], activity = [], screens = [], dismissedAlerts = {}, setDismissedAlerts, pushActivity }) {
  const liveSourceCount = mediaFiles.filter(f => ["kpi", "soc", "met"].includes(f.type)).length;
  const totalPlaylistTiles = playlists.reduce(
    (s, p) => s + Object.values(p.zones || {}).reduce((ss, arr) => ss + (arr?.length || 0), 0),
    0
  );

  // Count today's broadcast events from the activity log
  const todayPlays = activity.filter(a => a.type === "play").length;

  // Screens status counts
  const onlineCount = screens.filter(s => s.status === "online").length;
  const offlineCount = screens.filter(s => s.status === "offline").length;
  const idleCount = screens.filter(s => s.status === "idle").length;
  const availabilityPct = screens.length > 0 ? ((onlineCount + idleCount) / screens.length * 100).toFixed(1) : "—";

  // First offline screen drives the alert
  const offlineScreen = screens.find(s => s.status === "offline");
  const showAlert = offlineScreen && !dismissedAlerts[offlineScreen.id];
  // Derive what's currently playing from the active playlist
  const currentItem = activePlaylist
    ? (activePlaylist.zones?.A?.[0] || null)
    : null;
  const totalTiles = activePlaylist
    ? Object.values(activePlaylist.zones || {}).reduce((s, arr) => s + (arr?.length || 0), 0)
    : 0;

  // Upcoming schedule — derived from the actual playlists in state
  // Upcoming schedule — dérivé du planning réel (window.DATA.SCHEDULE_BLOCKS)
  const scheduleBlocksList = (window.DATA && window.DATA.SCHEDULE_BLOCKS) || [];
  const upcoming = scheduleBlocksList
    .filter(b => b.playlist)
    .slice(0, 5)
    .map(b => {
      const p = playlists.find(x => x.id === b.playlist);
      const hour = String(b.h + 7).padStart(2, "0") + ":00";
      return {
        time: hour,
        label: p ? p.name : (b.label || "Playlist supprimée"),
        color: p ? p.color : (b.color || "#9CA3AF"),
        screens: "Tous écrans",
      };
    });

  return (
    <div className="pane">
      <header className="pane__header">
        <div className="pane__title-group">
          <span className="pane__crumb">Vue d'ensemble</span>
          <h1 className="pane__title">Tableau de bord</h1>
        </div>
        <div className="pane__actions">
          <button className="btn"><Icon.Download /> Exporter</button>
          <button className="btn"><Icon.Eye /> Aperçu écran</button>
          <button className="btn btn--primary"><Icon.Bolt /> Diffuser maintenant</button>
        </div>
      </header>

      <div className="pane__body">
        {/* KPI row */}
        <div className="kpi-row">
          <Kpi label="Diffusions aujourd'hui" value={String(todayPlays)} sub={`sur ${onlineCount} écran${onlineCount > 1 ? "s" : ""} actif${onlineCount > 1 ? "s" : ""}`} icon={Icon.Broadcast} />
          <Kpi label="Médias en bibliothèque" value={String(mediaFiles.length)} sub={`dont ${liveSourceCount} source${liveSourceCount > 1 ? "s" : ""} live`} icon={Icon.Folder} />
          <Kpi label="Playlists configurées" value={String(playlists.length)} sub={`${totalPlaylistTiles} tuile${totalPlaylistTiles > 1 ? "s" : ""} au total`} icon={Icon.Playlist} />
          <Kpi label="Disponibilité du parc" value={`${availabilityPct} %`} sub={offlineCount > 0 ? `${offlineCount} écran${offlineCount > 1 ? "s déconnectés" : " déconnecté"}` : "tous les écrans en ligne"} trend={offlineCount > 0 ? { dir: "down", value: "alerte" } : null} icon={Icon.Wifi} />
        </div>

        {/* Main 2 col */}
        <div className="dash-main">
          {/* Live preview */}
          <div className="card">
            <div className="card__header">
              <div className="card__title">
                {activePlaylist ? <><span className="dot-pulse" /> Aperçu live — Open space</> : <>Aperçu écran — Open space</>}
                <span className="card__title-sub">3840 × 2160</span>
              </div>
              <div style={{ display: "flex", gap: 6 }}>
                <button className="btn btn--sm btn--ghost"><Icon.Settings size={12} /> Réglages</button>
                <button className="btn btn--sm"><Icon.Eye size={12} /> Plein écran</button>
              </div>
            </div>
            <div style={{ padding: 16 }}>
              <MiniViewer activePlaylist={activePlaylist} />
              {activePlaylist && currentItem ? (
                <div className="now-playing">
                  <div className="now-playing__left">
                    <TypeTag type={currentItem.type} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600 }}>{currentItem.title}</div>
                      <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{activePlaylist.name} · Zone A · Tuile 1 / {(activePlaylist.zones?.A || []).length}</div>
                    </div>
                  </div>
                  <div className="now-playing__progress">
                    <div className="now-playing__progress-bar"><div style={{ width: "42%" }} /></div>
                    <span className="mono" style={{ fontSize: 11.5, color: "var(--text-muted)" }}>02:14 / {activePlaylist.duration}</span>
                  </div>
                </div>
              ) : (
                <div className="now-playing" style={{ justifyContent: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
                  <Icon.Pause size={14} /> Aucune playlist en diffusion
                </div>
              )}
            </div>
          </div>

          {/* Right column */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="card">
              <div className="card__header">
                <div className="card__title">À venir aujourd'hui</div>
                <button className="btn btn--sm btn--ghost">Planning →</button>
              </div>
              <div className="upcoming-list">
                {upcoming.map((u, i) => (
                  <div key={i} className="upcoming-row">
                    <div className="upcoming-row__time">{u.time}</div>
                    <div className="upcoming-row__bar" style={{ background: u.color }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600 }}>{u.label}</div>
                      <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{u.screens}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {showAlert && (
              <div className="card alert-card">
                <div style={{ padding: 14, display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: "var(--danger-soft)", color: "var(--danger)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0, border: "1px solid #FECACA"
                  }}>
                    <Icon.AlertTriangle size={14} />
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-primary)" }}>{offlineScreen.name} hors-ligne</div>
                    <div style={{ fontSize: 11.5, color: "var(--text-secondary)", marginTop: 2 }}>
                      Le PC ne répond pas au ping. IP : <span className="mono">{offlineScreen.ip}</span>
                    </div>
                    <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
                      <button className="btn btn--sm" onClick={() => {
                        pushActivity?.({ who: "Système", action: "a diagnostiqué", target: offlineScreen.name, type: "upload" });
                        setDismissedAlerts(prev => ({ ...prev, [offlineScreen.id]: true }));
                      }}>Diagnostiquer</button>
                      <button className="btn btn--sm btn--ghost" onClick={() => setDismissedAlerts(prev => ({ ...prev, [offlineScreen.id]: true }))}>
                        Ignorer
                      </button>
                    </div>
                  </div>
                  <button className="btn btn--sm btn--icon btn--ghost" onClick={() => setDismissedAlerts(prev => ({ ...prev, [offlineScreen.id]: true }))} title="Fermer">
                    <Icon.X size={12} />
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Screens row + Activity */}
        <div className="dash-bottom">
          <div className="card">
            <div className="card__header">
              <div className="card__title">État des écrans</div>
              <button className="btn btn--sm btn--ghost">Gérer →</button>
            </div>
            <div className="screen-grid">
              {screens.map(s => (
                <div key={s.id} className={"screen-mini screen-mini--" + s.status}>
                  <div className="screen-mini__top">
                    <div className="screen-mini__name">{s.name}</div>
                    <span className={"badge badge--" + (s.status === "online" ? "success" : s.status === "idle" ? "warning" : "danger")}>
                      {s.status === "online" ? "En ligne" : s.status === "idle" ? "Inactif" : "Hors ligne"}
                    </span>
                  </div>
                  <div className="screen-mini__location">{s.location} · {s.resolution}</div>
                  <div className="screen-mini__playing">
                    {s.status === "online" ? (
                      activePlaylist ? (
                        <><Icon.Play size={11} /> {activePlaylist.name}</>
                      ) : (
                        <><Icon.Pause size={11} /> En attente</>
                      )
                    ) : s.status === "idle" ? (
                      <><Icon.Pause size={11} /> En veille</>
                    ) : (
                      <><Icon.Power size={11} /> Aucune connexion</>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card__header">
              <div className="card__title">Activité récente</div>
              <button className="btn btn--sm btn--ghost">Tout voir</button>
            </div>
            <div>
              {activity.slice(0, 6).map((a, i) => (
                <div key={i} className="activity-row">
                  <ActivityIcon type={a.type} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5 }}>
                      <strong style={{ color: "var(--text-primary)", fontWeight: 600 }}>{a.who}</strong>
                      <span style={{ color: "var(--text-muted)" }}> {a.action} </span>
                      <strong style={{ color: "var(--text-primary)", fontWeight: 600 }}>{a.target}</strong>
                    </div>
                    <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{a.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;