/* App shell — sidebar, topbar, route state */
const { useState, useEffect, useMemo, useRef } = React;
const D = window.OO_DATA;

const NAV = [
  { group: "Catalogo", items: [
    { id: "entries", label: "Catalog Entries", icon: "list", count: D.ENTRIES.length },
    { id: "works", label: "Works", icon: "work", count: D.WORKS.length },
    { id: "pieces", label: "Pieces", icon: "piece", count: D.PIECES.length },
    { id: "raccolte", label: "Raccolte", icon: "raccolta", count: D.RACCOLTE.length },
    { id: "contributors", label: "Contributors", icon: "contributor", count: D.CONTRIBUTORS.length },
    { id: "assets", label: "Assets", icon: "asset", count: D.ASSETS.length },
  ]},
];

const ROUTE_LABELS = {
  entries: "Catalog Entries",
  works: "Works",
  pieces: "Pieces",
  assets: "Assets",
  raccolte: "Raccolte",
  contributors: "Contributors",
};

function Sidebar({ route, setRoute }) {
  return (
    <nav className="side">
      <div className="brand">
        <div className="mark"></div>
        <div className="name">Opera One<small>BackOffice</small></div>
      </div>
      {NAV.map(g => (
        <div className="group" key={g.group}>
          <div className="label">{g.group}</div>
          {g.items.map(it => (
            <a key={it.id} className={"nav " + (route.page === it.id ? "active" : "")}
               onClick={() => setRoute({ page: it.id })}>
              <Icon name={it.icon} />
              <span>{it.label}</span>
              {it.count != null && <span className="count">{it.count.toLocaleString("it-IT")}</span>}
            </a>
          ))}
        </div>
      ))}
      <div className="me">
        <div className="av">AV</div>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
          <span style={{ fontSize: 12 }}>Antonio Vecchio</span>
          <span style={{ fontSize: 10.5, color: "#998363" }}>Editor in Chief</span>
        </div>
        <div style={{ marginLeft: "auto" }}>
          <Icon name="settings" />
        </div>
      </div>
    </nav>
  );
}

function Topbar({ route, setRoute }) {
  const crumbs = useMemo(() => {
    const r = [{ label: "Opera One", page: null }];
    r.push({ label: ROUTE_LABELS[route.page] || route.page, page: route.page });
    if (route.id) {
      const obj = (D.ENTRIES.find(x => x.id === route.id) ||
                   D.WORKS.find(x => x.id === route.id) ||
                   D.RACCOLTE.find(x => x.id === route.id) ||
                   D.CONTRIBUTORS.find(x => x.id === route.id) ||
                   D.IMPORT_BATCHES.find(x => x.id === route.id) ||
                   D.CATALOGS.find(x => x.id === route.id));
      if (obj) r.push({ label: obj.title || obj.name || obj.source || obj.sourceItemId, page: route.page, id: route.id });
    }
    return r;
  }, [route]);

  return (
    <header className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={"crumb " + (i === crumbs.length - 1 ? "last" : "")}
                  onClick={() => c.page && setRoute({ page: c.page })}>{c.label}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="search">
        <Icon name="search" className="ico" />
        <input placeholder="Cerca brani, opere, contributors, asset…" />
        <span className="kbd">⌘K</span>
      </div>
      <div className="iconbtn" title="Notifiche"><Icon name="bell" /></div>
      <div className="iconbtn" title="Aiuto">?</div>
    </header>
  );
}

function PageHeader({ eyebrow, title, subtitle, actions }) {
  return (
    <div className="page-h">
      <div className="titles">
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h1>{title}</h1>
        {subtitle && <p>{subtitle}</p>}
      </div>
      {actions && <div className="actions">{actions}</div>}
    </div>
  );
}

function StatusPill({ status }) {
  const map = {
    ready: { cls: "green", label: "Ready" },
    review: { cls: "warn", label: "In review" },
    draft: { cls: "gray", label: "Draft" },
    published: { cls: "green", label: "Pubblicato" },
    completed: { cls: "green", label: "Completato" },
    running: { cls: "blue", label: "In corso" },
    "needs-review": { cls: "warn", label: "Da rivedere" },
    failed: { cls: "err", label: "Errore" },
    active: { cls: "green", label: "Attivo" },
  };
  const m = map[status] || { cls: "gray", label: status || "—" };
  return <span className={"pill " + m.cls}>{m.label}</span>;
}
window.StatusPill = StatusPill;
window.PageHeader = PageHeader;
window.Sidebar = Sidebar;
window.Topbar = Topbar;