/* Atlas — App shell, sidebar, topbar, time-travel state */

const { useState, useEffect, useMemo, useRef, useCallback, createContext, useContext } = React;

/* ---------- Icon helper ---------- */
const Icon = ({ name, className = "", style }) => {
  const inner = (window.ICON_PATHS || {})[name];
  if (!inner) return <svg className={`ic ${className}`} style={style} aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" />;
  return (
    <svg className={`ic ${className}`} style={style} aria-hidden="true" width="14" height="14" viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      dangerouslySetInnerHTML={{ __html: inner }} />
  );
};
window.Icon = Icon;

/* ---------- Avatar ---------- */
const Avatar = ({ person, size = "sm" }) => {
  const cls = size === "lg" ? "av av-lg" : size === "md" ? "av av-md" : "av";
  const kindCls = person.kind === "contractor" ? "av-con" : "av-emp";
  return (
    <span className={`${cls} ${kindCls}`} title={person.name}>
      {window.initials(person.name)}
    </span>
  );
};
window.Avatar = Avatar;

/* ---------- App store ---------- */
const AppCtx = createContext(null);
window.useApp = () => useContext(AppCtx);

function AppProvider({ children }) {
  const [route, setRoute] = useState({ name: "overview", params: {} });
  const [viewDate, setViewDate] = useState(window.TODAY);
  const [scrubOpen, setScrubOpen] = useState(false);
  const [paletteOpen, setPaletteOpen] = useState(false);
  const [paletteCtx, setPaletteCtx] = useState(null); // { kind, personId?, teamId? }
  const [drawer, setDrawer] = useState(null);         // { kind, payload }

  const go = useCallback((name, params = {}) => setRoute({ name, params }), []);

  /* Keyboard: ⌘K opens palette, T jumps to today, Esc closes */
  useEffect(() => {
    const onKey = (e) => {
      const meta = e.metaKey || e.ctrlKey;
      if (meta && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setPaletteCtx(null);
        setPaletteOpen(true);
      } else if (e.key === "Escape") {
        if (drawer) setDrawer(null);
        else if (paletteOpen) setPaletteOpen(false);
        else if (scrubOpen) setScrubOpen(false);
      } else if (!paletteOpen && !drawer && e.key.toLowerCase() === "t" && !e.target.matches("input,textarea")) {
        setViewDate(window.TODAY);
      } else if (!paletteOpen && !drawer && e.key === "/" && !e.target.matches("input,textarea")) {
        e.preventDefault();
        setPaletteCtx(null);
        setPaletteOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [drawer, paletteOpen, scrubOpen]);

  /* Brand intensity is fixed to full */
  useEffect(() => {
    document.body.classList.remove("brand-subtle", "brand-utility");
    document.body.classList.add("brand-full");
  }, []);

  const value = {
    route, go,
    viewDate, setViewDate,
    scrubOpen, setScrubOpen,
    paletteOpen, setPaletteOpen,
    paletteCtx, setPaletteCtx,
    drawer, setDrawer,
  };
  return <AppCtx.Provider value={value}>{children}</AppCtx.Provider>;
}
window.AppProvider = AppProvider;

/* ---------- Sidebar ---------- */
function Sidebar() {
  const { route, go } = window.useApp();
  const totals = window.orgStats(window.TODAY);
  const Item = ({ name, label, icon, count, kbd }) => (
    <div className={`nav-item ${route.name === name ? "active" : ""}`} onClick={() => go(name)}>
      <Icon name={icon} className="nav-icon" />
      <span>{label}</span>
      {count != null && <span className="nav-count">{count}</span>}
      {kbd && <span className="nav-kbd">{kbd}</span>}
    </div>
  );
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">A</div>
        <div>
          <div className="brand-name">Atlas</div>
          <div className="brand-sub">Moneyfarm · workforce</div>
        </div>
      </div>

      <div className="nav-section">Organisation</div>
      <Item name="overview"  label="Overview"      icon="dashboard" />
      <Item name="matrix"    label="Matrix"        icon="settings-sliders" />
      <Item name="teams"     label="Work groups"   icon="user-multiple" count={window.WORK_GROUPS.length} />
      <Item name="functions" label="Functions"     icon="target" count={window.FUNCTIONS.length} />
      <Item name="reporting" label="Line reporting" icon="arrow-turn" />
      <Item name="people"    label="People"        icon="user" count={totals.total} />

      <div className="nav-section">Planning</div>
      <Item name="timeline"  label="Time machine"  icon="arrow-left" />
      <Item name="events"    label="Events"        icon="invoice" count={window.EVENTS.length} />
      <Item name="costs"     label="Contractor costs" icon="euro" />

      <div className="sidebar-foot">
        <div className="user-pip">MV</div>
        <div className="user-pip-meta">
          <span className="user-pip-name">Matilde V.</span>
          <span className="user-pip-role">HR Operations</span>
        </div>
        <Icon name="settings" className="nav-icon" style={{ marginLeft: "auto", opacity: 0.6 }} />
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;

/* ---------- Top bar (with crumbs, search pill, date pill) ---------- */
function TopBar({ crumbs }) {
  const { setPaletteOpen, setPaletteCtx, viewDate, setScrubOpen } = window.useApp();
  const isToday = window.isToday(viewDate);
  const isFuture = viewDate > window.TODAY;
  const cls = isToday ? "" : isFuture ? "is-future" : "is-past";
  const label = isToday ? "Today" : isFuture ? "Future" : "Past";
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="crumb-sep">/</span>}
            <span className={i === crumbs.length - 1 ? "crumb-current" : "crumb"}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer" />
      <div className="search-pill" onClick={() => { setPaletteCtx(null); setPaletteOpen(true); }}>
        <Icon name="search" />
        <span>Search people, teams, events…</span>
        <span className="kbd-mini">⌘K</span>
      </div>
      <button className={`date-pill ${cls}`} onClick={() => setScrubOpen(true)} title="Open time machine (T to jump to today)">
        <span className="dp-dot" />
        <span className="dp-label">{label} ·</span>
        <span className="dp-date">{window.dstr(viewDate)}</span>
        <Icon name="chevron-down" style={{ width: 12, height: 12, color: "var(--fg-4)" }} />
      </button>
      <button className="btn btn-primary" onClick={() => { setPaletteCtx({ kind: "new-event" }); setPaletteOpen(true); }}>
        <Icon name="plus" />
        New event
      </button>
    </div>
  );
}
window.TopBar = TopBar;

/* ---------- Time-travel ribbon (only when off-today) ---------- */
function TTRibbon() {
  const { viewDate, setViewDate } = window.useApp();
  if (window.isToday(viewDate)) return null;
  const isFuture = viewDate > window.TODAY;
  return (
    <div className="tt-ribbon">
      <span className={`tt-tag ${isFuture ? "is-future" : "is-past"}`}>
        {isFuture ? "Projected future" : "Historical view"}
      </span>
      <span>
        Viewing Atlas as of <strong>{window.dstr(viewDate)}</strong> ·
        {" "}{Math.abs(window.daysBetween(window.TODAY, viewDate))} days {isFuture ? "ahead" : "ago"}
      </span>
      <button className="return" onClick={() => setViewDate(window.TODAY)}>
        Return to today
        <span className="kbd kbd-dark" style={{ marginLeft: 8 }}>T</span>
      </button>
    </div>
  );
}
window.TTRibbon = TTRibbon;

/* ---------- Page layout helper ---------- */
function PageHead({ eyebrow, title, meta, actions }) {
  return (
    <div className="page-head">
      <div>
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        <h1 className="page-title">{title}</h1>
        {meta && <div className="page-meta" style={{ marginTop: 6 }}>{meta}</div>}
      </div>
      <div style={{ display: "flex", gap: 8 }}>{actions}</div>
    </div>
  );
}
window.PageHead = PageHead;

/* ---------- Tab strip ---------- */
function TabStrip({ tabs, value, onChange }) {
  return (
    <div className="tab-row">
      {tabs.map(t => (
        <div key={t.value} className={`tab ${value === t.value ? "active" : ""}`} onClick={() => onChange(t.value)}>
          {t.label}
          {t.count != null && <span className="count">{t.count}</span>}
        </div>
      ))}
    </div>
  );
}
window.TabStrip = TabStrip;

/* ---------- Stat block ---------- */
function Stat({ label, value, meta, bar }) {
  return (
    <div className="stat">
      <div className="stat-label">{label}</div>
      <div className="stat-value">{value}</div>
      {meta && <div className="stat-meta">{meta}</div>}
      {bar && (
        <div className="stat-bar">
          {bar.emp > 0 && <div className="seg-emp" style={{ width: `${(bar.emp / (bar.emp + bar.con)) * 100}%` }} />}
          {bar.con > 0 && <div className="seg-con" style={{ width: `${(bar.con / (bar.emp + bar.con)) * 100}%` }} />}
        </div>
      )}
    </div>
  );
}
window.Stat = Stat;

/* ---------- Chip helpers ---------- */
function KindChip({ kind }) {
  if (kind === "contractor") return <span className="chip chip-con"><span className="chip-dot con" />Contractor</span>;
  return <span className="chip chip-emp"><span className="chip-dot emp" />Employee</span>;
}
function StatusChip({ from, to, date }) {
  if (to != null && to < date) return <span className="chip chip-ended">Ended</span>;
  if (from > date) return <span className="chip chip-planned">Planned</span>;
  return <span className="chip chip-active">Active</span>;
}
window.KindChip = KindChip;
window.StatusChip = StatusChip;

/* ---------- Person cell (compact) ---------- */
function PersonCell({ person, role, onClick }) {
  const { go } = window.useApp();
  return (
    <div className="cell-person" style={{ cursor: "pointer" }} onClick={() => (onClick ? onClick(person) : go("person", { id: person.id }))}>
      <Avatar person={person} />
      <div style={{ minWidth: 0 }}>
        <div className="pname">{person.name}</div>
        <div className="prole">{role || (window.assignmentAt(person, window.TODAY)?.role ?? "—")}</div>
      </div>
    </div>
  );
}
window.PersonCell = PersonCell;