// Aria console — app shell: fixed sidebar (brand, domain nav, user) + topbar.
const { Icon, Avatar, Badge, IconButton } = window.AriaDesignSystem_af77ab;

function Brand() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 6px" }}>
      <span style={{
        width: 32, height: 32, borderRadius: 9, background: "var(--primary)",
        display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", flex: "none",
      }}>
        <Icon name="bot-message-square" size={19} color="#fff" strokeWidth={1.75} />
      </span>
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
        <span style={{ font: "var(--fw-semibold) 17px/1 var(--font-sans)", color: "var(--text-strong)", letterSpacing: "-0.01em" }}>Aria</span>
        <span style={{ fontSize: 11, color: "var(--text-subtle)" }}>Console</span>
      </span>
    </div>
  );
}

function NavItem({ icon, label, active, count, soon, onClick }) {
  return (
    <button onClick={soon ? undefined : onClick} disabled={soon} style={{
      display: "flex", alignItems: "center", gap: 10, width: "100%",
      padding: "8px 10px", border: 0, borderRadius: "var(--radius-sm)", cursor: soon ? "default" : "pointer",
      background: active ? "var(--sage-050)" : "transparent",
      color: active ? "var(--primary-text)" : "var(--text-muted)",
      font: "var(--fw-medium) var(--fs-body)/1 var(--font-sans)", textAlign: "left", opacity: soon ? 0.6 : 1,
    }}>
      <Icon name={icon} size={18} color={active ? "var(--primary-text)" : "var(--text-muted)"} />
      <span style={{ flex: 1 }}>{label}</span>
      {soon && <Badge tone="outline">in arrivo</Badge>}
      {count != null && !soon && <Badge tone={active ? "success" : "neutral"}>{count}</Badge>}
    </button>
  );
}

// Catalogo domini = selettore + filtro per la lista assistenti.
// Consuma GET /domains → [{ id, label, assistantCount }] (oggi mock via AriaData.getDomains).
// `domains` null = ancora in caricamento; [] = nessun dominio (stato vuoto).
function DomainNav({ domains, active, onSelect }) {
  return (
    <div>
      <div style={{ font: "var(--text-label)", color: "var(--text-subtle)", textTransform: "uppercase", letterSpacing: "var(--ls-wide)", fontSize: 10, padding: "0 10px 8px" }}>Domini</div>
      {domains == null ? (
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", color: "var(--text-subtle)", fontSize: 12 }}>
          <Icon name="loader" size={14} color="var(--text-subtle)" />
          <span>Caricamento…</span>
        </div>
      ) : domains.length === 0 ? (
        <div style={{ padding: "8px 10px", color: "var(--text-subtle)", fontSize: 12, lineHeight: 1.4 }}>
          Nessun dominio disponibile.
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {domains.map((d) => (
            <NavItem key={d.id} icon="globe" label={d.label} count={d.assistantCount} active={active === d.id} onClick={() => onSelect(d.id)} />
          ))}
        </div>
      )}
    </div>
  );
}

// Footer della sidebar: utente loggato (displayName) + azione Logout.
// L'utente arriva dal context auth (useAuth); il logout scarta i token e riporta al login.
function UserFooter() {
  const { user, signOut } = window.AriaAuth.useAuth();
  const name = (user && user.displayName) || "Utente";
  return (
    <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 10, padding: "8px 6px", borderTop: "1px solid var(--border-subtle)" }}>
      <Avatar name={name} tone="sky" />
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.2, flex: 1, minWidth: 0 }}>
        <span style={{ fontSize: 13, fontWeight: 500, color: "var(--text-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name}</span>
        <span style={{ fontSize: 11, color: "var(--text-subtle)" }}>{(user && user.username) || ""}</span>
      </span>
      <IconButton label="Esci" onClick={() => signOut()}><Icon name="log-out" size={16} /></IconButton>
    </div>
  );
}

function AppShell({ domain, onDomain, domains, children }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "var(--sidebar-w) 1fr", minHeight: "100vh", background: "var(--surface-app)" }}>
      {/* Sidebar */}
      <aside style={{
        background: "var(--surface-card)", borderRight: "1px solid var(--border-subtle)",
        display: "flex", flexDirection: "column", padding: 14, gap: 18, position: "sticky", top: 0, height: "100vh",
      }}>
        <Brand />
        <DomainNav domains={domains} active={domain} onSelect={onDomain} />
        <div style={{ borderTop: "1px solid var(--border-subtle)", paddingTop: 14 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <NavItem icon="bot" label="Assistenti" active />
            <NavItem icon="puzzle" label="Skill condivise" soon />
            <NavItem icon="history" label="Attività" soon />
            <NavItem icon="settings" label="Impostazioni" />
          </div>
        </div>
        <UserFooter />
      </aside>

      {/* Main column */}
      <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>{children}</div>
    </div>
  );
}

function TopBar({ title, subtitle, actions, back }) {
  const { Icon, IconButton } = window.AriaDesignSystem_af77ab;
  return (
    <header style={{
      height: "var(--topbar-h)", flex: "none", display: "flex", alignItems: "center", gap: 12,
      padding: "0 28px", background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)",
      position: "sticky", top: 0, zIndex: 5,
    }}>
      {back && <IconButton label="Indietro" onClick={back}><Icon name="arrow-left" size={18} /></IconButton>}
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.25, minWidth: 0 }}>
        <span style={{ font: "var(--text-h2)", color: "var(--text-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{title}</span>
        {subtitle && <span style={{ fontSize: 12, color: "var(--text-muted)" }}>{subtitle}</span>}
      </div>
      <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>{actions}</div>
    </header>
  );
}

Object.assign(window, { AppShell, TopBar });