/* AppShell — PropTrackr backend chrome: harbor sidebar + light top bar.
   Responsive: below 860px the sidebar becomes an off-canvas drawer toggled by
   a hamburger in the top bar. Exposes window.AppShell. */
const { useState } = React;
const PT_NAV = [
  { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" },
  { id: "properties", label: "Properties", icon: "building-2" },
  { id: "contacts", label: "Contacts", icon: "users" },
  { id: "tasks", label: "Tasks & Calendar", icon: "calendar-clock" },
  { id: "website", label: "Website & Blog", icon: "newspaper" },
  { id: "propmapr", label: "PropMapr", icon: "map-pin" },
  { id: "admin", label: "Admin", icon: "settings" },
];

function Wordmark({ onDark = true }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
      <span style={{ width: 30, height: 30, borderRadius: 8, background: onDark ? "rgba(255,255,255,.14)" : "linear-gradient(160deg,var(--harbor-500),var(--harbor-700))", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name="home" size={17} color="#fff" strokeWidth={2.25} />
      </span>
      <span style={{ fontSize: 19, fontWeight: 800, letterSpacing: "-0.03em" }}>
        <span style={{ color: onDark ? "#fff" : "var(--slate-900)" }}>prop</span>
        <span style={{ color: onDark ? "var(--harbor-200)" : "var(--harbor-500)" }}>trackr</span>
      </span>
    </div>
  );
}

function NavItem({ item, active, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 11, width: "100%", padding: "9px 12px",
        borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", textAlign: "left",
        background: active ? "rgba(255,255,255,.12)" : (hover ? "rgba(255,255,255,.06)" : "transparent"),
        color: active ? "#fff" : "var(--harbor-100)", fontFamily: "var(--font-sans)",
        fontSize: "var(--text-base)", fontWeight: active ? 600 : 500, position: "relative",
      }}>
      {active && <span style={{ position: "absolute", left: -12, top: 8, bottom: 8, width: 3, borderRadius: 3, background: "var(--ember-400)" }} />}
      <Icon name={item.icon} size={18} color={active ? "#fff" : "var(--harbor-200)"} />
      {item.label}
    </button>
  );
}

function AppShell({ active, onNav, title, subtitle, actions, children }) {
  const d = window.PT_DATA;
  const [drawer, setDrawer] = useState(false);
  return (
    <div style={{ display: "flex", height: "100vh", overflow: "hidden", background: "var(--surface-page)" }}>
      {/* Mobile scrim */}
      {drawer && <div className="pt-scrim" onClick={() => setDrawer(false)} />}

      {/* Sidebar (drawer on mobile) */}
      <aside className={"pt-sidebar" + (drawer ? " pt-open" : "")} style={{ width: "var(--sidebar-width)", flex: "none", background: "var(--harbor-900)", display: "flex", flexDirection: "column", padding: "16px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", padding: "6px 8px 18px" }}>
          <Wordmark />
          <span className="pt-hamburger" style={{ marginLeft: "auto" }}>
            <IconButton icon="x" label="Close menu" onClick={() => setDrawer(false)} style={{ color: "var(--harbor-100)" }} />
          </span>
        </div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {PT_NAV.map((n) => <NavItem key={n.id} item={n} active={active === n.id} onClick={() => { onNav && onNav(n.id); setDrawer(false); }} />)}
        </nav>
        <div style={{ marginTop: "auto", padding: 8, display: "flex", alignItems: "center", gap: 9, borderTop: "1px solid rgba(255,255,255,.08)" }}>
          <Avatar name={d.user.name} size="sm" dot="online" />
          <div style={{ minWidth: 0 }}>
            <div style={{ color: "#fff", fontSize: "var(--text-sm)", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.user.name}</div>
            <div style={{ color: "var(--harbor-300)", fontSize: "var(--text-2xs)" }}>{d.user.role}</div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
        <header style={{ height: "var(--topbar-height)", flex: "none", background: "var(--surface-card)", borderBottom: "1px solid var(--border-default)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px" }}>
          <span className="pt-hamburger" style={{ flex: "none" }}>
            <IconButton icon="menu" label="Open menu" variant="solid" onClick={() => setDrawer(true)} />
          </span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: "var(--text-xl)", fontWeight: 700, color: "var(--text-strong)", lineHeight: 1.1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</div>
            {subtitle && <div style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{subtitle}</div>}
          </div>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
            <div className="pt-topsearch" style={{ position: "relative", width: 240 }}>
              <span style={{ position: "absolute", left: 11, top: "50%", transform: "translateY(-50%)", color: "var(--text-subtle)" }}><Icon name="search" size={16} /></span>
              <input placeholder="Search properties, contacts…" style={{ width: "100%", padding: "8px 12px 8px 34px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", background: "var(--surface-sunken)", fontSize: "var(--text-sm)", fontFamily: "var(--font-sans)", outline: "none", boxSizing: "border-box" }} />
            </div>
            <IconButton icon="bell" label="Notifications" variant="solid" />
            {actions}
          </div>
        </header>
        <main style={{ flex: 1, overflow: "auto" }}>{children}</main>
      </div>
    </div>
  );
}
window.AppShell = AppShell;