// Rôle : structure le layout global avec sidebar, topbar, navigation et contenu.
import React from "react";
import { Icon } from "./Icon.jsx";
import { ImportButton } from "./ImportButton.jsx";

export function Shell({ route, content, games, toolboxes, links, actions, children }) {
  const gameId = route.split("/")[1] === "games" ? route.split("/")[2] || "" : "";
  const game = games.find((item) => item.id === gameId);
  const linkedToolbox = game ? toolboxes.find((item) => item.id === links[game.id]) : null;
  const topbarLabel = route.startsWith("/toolbox") ? content.topbar.toolbox : route.startsWith("/games") ? content.topbar.games : route === "/library" ? content.topbar.library : content.topbar.dashboard;
  const toolboxLabel = linkedToolbox ? `Ouvrir la toolbox ${linkedToolbox.name}` : "Associer une toolbox";

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <a className="brand" href="#/" aria-label={content.brand.homeAriaLabel}>
          <span className="brand-mark" aria-hidden="true" />
          <span className="brand-name"><span className="brand-name-main">Sokko</span> <span className="brand-name-accent">G</span></span>
        </a>
        <nav className="nav" aria-label="Navigation principale">
          <a className={`nav-item ${route === "/" ? "active" : ""}`} href="#/"><span className="nav-icon nav-icon-home" aria-hidden="true" /><strong>{content.navigation.home}</strong></a>
          <a className={`nav-item ${route.startsWith("/games") ? "active" : ""}`} href="#/games"><span className="nav-icon nav-icon-controller" aria-hidden="true" /><strong>{content.navigation.games}</strong></a>
          <a className={`nav-item ${route.startsWith("/toolboxes") || route.startsWith("/toolbox") ? "active" : ""}`} href="#/toolboxes"><span className="nav-icon nav-icon-toolbox" aria-hidden="true" /><strong>{content.navigation.toolboxes}</strong></a>
        </nav>
        <div className="sidebar-secondary-links">
          <a className={`sidebar-about-link ${route === "/about" ? "active" : ""}`} href="#/about"><span className="sidebar-about-icon" aria-hidden="true">?</span><strong>{content.navigation.about}</strong></a>
          <a className={`sidebar-about-link ${route === "/library" ? "active" : ""}`} href="#/library"><span className="sidebar-about-icon" aria-hidden="true"><Icon name="book" /></span><strong>{content.library.eyebrow}</strong></a>
        </div>
        <div className="sidebar-note">
          <span className="badge">{content.sidebar.badge}</span>
          <p>{content.sidebar.note}</p>
          <div className="sidebar-storage-actions" aria-label="Actions globales de stockage">
            <button className="sidebar-action-button primary" onClick={actions.exportAllToolboxes} aria-label="Exporter toutes les toolboxes" title="Exporter tout"><Icon name="export" /></button>
            <ImportButton className="sidebar-action-button import-icon-button" title="Importer tout" ariaLabel="Importer toutes les toolboxes" onFile={actions.importAllToolboxes} icon="import" />
          </div>
        </div>
      </aside>
      <div className="content-shell">
        <header className="topbar">
          <div><strong>{topbarLabel}</strong></div>
          {game && (
            <div className="topbar-actions">
              <button className="drawer-button toolbox-icon-button primary" onClick={() => actions.setDrawerGameId(game.id)} aria-label={toolboxLabel} title={toolboxLabel}>
                <img src="/static/icons/toolbox.svg" alt="" aria-hidden="true" />
              </button>
            </div>
          )}
        </header>
        <main>{children}</main>
      </div>
      <nav className="mobile-nav" aria-label="Navigation mobile">
        <a className={route === "/" ? "active" : ""} href="#/">{content.navigation.home}</a>
        <a className={route.startsWith("/toolboxes") || route.startsWith("/toolbox") ? "active" : ""} href="#/toolboxes">{content.navigation.toolboxes}</a>
        <button className="primary" onClick={() => actions.setCreateModal({})}>+</button>
        <a className={route === "/library" ? "active" : ""} href="#/library">{content.navigation.mobileLibrary}</a>
        <a className={route.startsWith("/games") ? "active" : ""} href="#/games">{content.navigation.mobileGames}</a>
      </nav>
    </div>
  );
}
