// Main app — owns shared playlist state so Dashboard / Schedule / Sidebar stay in sync

const PL_LAYOUTS_LIST = [
  { id: "full", label: "Plein écran", zones: ["A"] },
  { id: "split-h", label: "2 colonnes", zones: ["A", "B"] },
  { id: "split-v", label: "2 lignes", zones: ["A", "B"] },
  { id: "main-side", label: "Principal + 2", zones: ["A", "B", "C"] },
  { id: "quad", label: "Quadrants 2×2", zones: ["A", "B", "C", "D"] },
  { id: "main3", label: "Mosaïque", zones: ["A", "B", "C", "D"] },
];

function App() {
  // Mode initial selon l'URL : ?mode=viewer → visionneuse plein écran (lancé par l'agent kiosk)
  const urlParams = new URLSearchParams(window.location.search);
  const initialMode = urlParams.get("mode") === "viewer" ? "viewer" : "controller";
  const previewPlaylistId = urlParams.get("playlist"); // override pour mode preview
  const [mode, setMode] = useState(initialMode);
  const [page, setPage] = useState("dashboard");

  // ---- Shared state ----
  const [mediaFiles, setMediaFiles] = useState(() => window.DATA.MEDIA_FILES);
  const [activity, setActivity] = useState(() => window.DATA.ACTIVITY);
  const [scheduleBlocks, setScheduleBlocks] = useState(() => window.DATA.SCHEDULE_BLOCKS);
  const [screens, setScreens] = useState(() => window.DATA.SCREENS);
  const [dismissedAlerts, setDismissedAlerts] = useState({});

  // Helper used by every page to log an event
  const pushActivity = (entry) => {
    setActivity(prev => [{ time: "À l'instant", who: "Alexis P.", ...entry }, ...prev].slice(0, 50));
  };

  // Shared playlist state — sourcé UNIQUEMENT depuis l'API (pas de seed local)
  const [playlists, setPlaylists] = useState(() => {
    const { PLAYLISTS } = window.DATA;
    // Garantir que zones est toujours présent (les playlists fraîches de l'API l'ont déjà)
    return PLAYLISTS.map(p => ({
      ...p,
      zones: p.zones || { A: [], B: [], C: [], D: [] },
    }));
  });

  // En mode preview (?playlist=X), on force cette playlist au lieu de l'active
  const activePlaylist = previewPlaylistId
    ? playlists.find(p => p.id === previewPlaylistId)
    : playlists.find(p => p.active);

  if (mode === "viewer") {
    return <Viewer onExit={() => setMode("controller")} activePlaylist={activePlaylist} isPreview={!!previewPlaylistId} />;
  }

  const sharedProps = {
    playlists, setPlaylists, activePlaylist,
    mediaFiles, setMediaFiles,
    activity, pushActivity,
    scheduleBlocks, setScheduleBlocks,
    screens, setScreens,
    dismissedAlerts, setDismissedAlerts,
  };

  let pageEl;
  if (page === "dashboard") pageEl = <Dashboard {...sharedProps} />;
  else if (page === "media") pageEl = <Media {...sharedProps} />;
  else if (page === "playlists") pageEl = <Playlists {...sharedProps} />;
  else if (page === "schedule") pageEl = <Schedule {...sharedProps} />;
  else if (page === "screens") pageEl = <Screens {...sharedProps} />;
  else if (page === "stats") pageEl = <Stats {...sharedProps} />;
  else if (page === "settings") pageEl = <Settings {...sharedProps} />;
  else pageEl = <Dashboard {...sharedProps} />;

  return (
    <div className="app">
      <ModeBar mode={mode} setMode={setMode} screens={screens} />
      <div className="app__body">
        <Sidebar page={page} setPage={setPage} activePlaylist={activePlaylist} setPlaylists={setPlaylists} mediaFiles={mediaFiles} screens={screens} />
        {pageEl}
      </div>
    </div>
  );
}

// Booter via le backend (fetch /api/* puis render)
window.bootElsia();