/* AppShell — the One Day Doors & Closets internal chrome: dark-green nav rail + top header. */

function AppShell({ active, onNavigate, viewer, onViewer, children }) {
  const nav = [
    { key: "calculator", label: "Calculator", icon: "Calculator" },
    { key: "quotes", label: "Quotes", icon: "FileText" },
    { key: "contracts", label: "Contracts", icon: "FileSignature" },
    { key: "pipeline", label: "Jobs Pipeline", icon: "Workflow" },
    { key: "contacts", label: "Contacts", icon: "Contact" },
    { key: "calendar", label: "Calendar", icon: "CalendarDays" },
    { key: "payroll", label: "Payroll", icon: "Wallet" },
    { key: "users", label: "Users", icon: "UserCog" },
    { key: "fleet", label: "Devon Fleet", icon: "Activity", adminOnly: true },
    { key: "reports", label: "Reports", icon: "BarChart3" },
    { key: "settings", label: "Settings", icon: "Settings" },
  ].filter((item) => !item.adminOnly || (viewer && viewer.role === "owner"));

  return (
    <div style={{ height: "100%", display: "flex", background: "var(--surface-page)" }}>
      {/* Nav rail */}
      <div style={{
        width: "var(--rail-width)", flexShrink: 0, background: "var(--surface-forest)",
        display: "flex", flexDirection: "column", alignItems: "center",
        padding: "20px 0", gap: 8,
      }}>
        <div style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18, flexShrink: 0 }}>
          <img src={window.__OD_LOGO_STACKED} alt="One Day" style={{ width: 40, height: 40, objectFit: "contain", filter: "brightness(0) invert(1)" }} />
        </div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
          {nav.map((item) => {
            const isActive = active === item.key;
            return (
              <button key={item.key} onClick={() => onNavigate(item.key)} title={item.label}
                style={{
                  width: 44, height: 44, borderRadius: "var(--radius-md)", border: "none", cursor: "pointer",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: isActive ? "rgba(255,255,255,0.18)" : "transparent",
                  color: isActive ? "#fff" : "rgba(255,255,255,0.55)",
                  boxShadow: isActive ? "var(--shadow-sm)" : "none",
                  transition: "all var(--duration-base) var(--ease-standard)",
                }}
                onMouseEnter={(e) => { if (!isActive) { e.currentTarget.style.background = "rgba(255,255,255,0.08)"; e.currentTarget.style.color = "rgba(255,255,255,0.8)"; } }}
                onMouseLeave={(e) => { if (!isActive) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "rgba(255,255,255,0.55)"; } }}
              >
                <Icon name={item.icon} size={20} />
              </button>
            );
          })}
        </nav>
      </div>

      {/* Main column */}
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
        {/* Header */}
        <header style={{
          position: "sticky", top: 0, zIndex: 30, background: "var(--surface-card)",
          borderBottom: "1px solid var(--border-subtle)",
          padding: "14px 28px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
        }}>
          <BrandMark height={28} variant="lockup" />
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, background: "var(--input-bg)", padding: "9px 14px", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-subtle)" }}>
              <Icon name="Search" size={16} color="var(--text-muted)" />
              <input placeholder="Search…" style={{ border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 14, width: 130, color: "var(--text-primary)" }} />
            </div>
            {viewer && onViewer && (function () {
              const reps = [...new Set((window.OneDayPayroll ? window.OneDayPayroll.load() : []).map((s) => s.rep))].filter(Boolean).sort();
              const val = viewer.role === "rep" ? "rep:" + viewer.repName : viewer.role;
              const label = viewer.role === "rep" ? viewer.repName : viewer.role === "owner" ? "Owner" : "Office Manager";
              const initials = (label || "?").split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase();
              return (
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 8, background: "var(--input-bg)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "6px 10px 6px 8px" }}>
                    <div style={{ width: 28, height: 28, borderRadius: "var(--radius-md)", background: "var(--color-primary-soft)", border: "1px solid var(--color-primary-ring)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary-deep)", fontWeight: 700, fontSize: 11 }}>{initials}</div>
                    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
                      <span style={{ fontSize: "var(--text-2xs)", color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>Viewing as</span>
                      <select value={val} onChange={(e) => { const v = e.target.value; if (v === "owner" || v === "manager") onViewer({ role: v, repName: null }); else onViewer({ role: "rep", repName: v.slice(4) }); }}
                        style={{ border: "none", background: "transparent", outline: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-primary)", padding: 0, maxWidth: 150 }}>
                        <option value="owner">Owner</option>
                        <option value="manager">Office Manager</option>
                        {reps.map((r) => <option key={r} value={"rep:" + r}>Rep: {r}</option>)}
                      </select>
                    </div>
                  </div>
                </div>
              );
            })()}
          </div>
        </header>

        {/* Page body */}
        <main style={{ flex: 1, minHeight: 0, padding: "28px", overflow: "auto" }}>
          {children}
        </main>
      </div>
    </div>
  );
}

window.AppShell = AppShell;