// Sidebar + Topbar chrome
const { useState: useStateCh } = React;

function Sidebar({ active = "Dashboard", onChange }) {
  const items = [
    { key: "Dashboard", icon: Icons.dashboard },
    { key: "Reports",   icon: Icons.reports },
    { key: "Settings",  icon: Icons.settings },
  ];
  return (
    <aside style={{
      width: 200, flexShrink: 0,
      background: "#FBFBFA",
      borderRight: "1px solid #ECECEA",
      padding: "20px 12px",
      display: "flex", flexDirection: "column", gap: 2,
      height: "100vh", position: "sticky", top: 0,
    }}>
      <div style={{ padding: "6px 10px 22px", display: "flex", alignItems: "center", gap: 9 }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7, background: "#1F2433",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1L8.5 5.3l4.5.4-3.4 3 1 4.3L7 10.7 3.4 13l1-4.3-3.4-3 4.5-.4z" fill="#A3E494"/></svg>
        </div>
        <span style={{ fontSize: 13, fontWeight: 600, color: "#1F2433", letterSpacing: -0.1 }}>Northstar</span>
      </div>

      {items.map(it => {
        const isActive = it.key === active;
        return (
          <div key={it.key}
            onClick={() => onChange?.(it.key)}
            style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "9px 10px", borderRadius: 7,
              fontSize: 13, fontWeight: isActive ? 500 : 400,
              color: isActive ? "#1F2433" : "#6B7280",
              background: isActive ? "#EFF7E8" : "transparent",
              cursor: "pointer",
              transition: "background 120ms ease",
            }}
            onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "#F3F3F1"; }}
            onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "transparent"; }}
          >
            <it.icon size={17} />
            <span>{it.key}</span>
          </div>
        );
      })}

      <div style={{ marginTop: "auto", padding: "12px 10px 4px", borderTop: "1px solid #ECECEA", marginRight: -12, marginLeft: -12, paddingRight: 22, paddingLeft: 22 }}>
        <div style={{ fontSize: 10.5, color: "#9CA3AF", letterSpacing: 0.4, textTransform: "uppercase", marginBottom: 6 }}>Quarter pacing</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 5 }}>
          <span style={{ fontSize: 18, fontWeight: 600, color: "#1F2433" }}>68%</span>
          <span style={{ fontSize: 11, color: "#6BAE5B" }}>of target</span>
        </div>
        <div style={{ height: 4, borderRadius: 999, background: "#ECECEA", marginTop: 6, overflow: "hidden" }}>
          <div style={{ width: "68%", height: "100%", background: "#A3E494" }} />
        </div>
      </div>
    </aside>
  );
}

function RoleSwitcher({ role, onChange }) {
  return (
    <div style={{
      display: "inline-flex", padding: 3,
      background: "#F3F3F1", borderRadius: 999,
      border: "1px solid #ECECEA",
    }}>
      {["Manager View", "Agent View"].map(label => {
        const isActive = role === label;
        return (
          <button key={label}
            onClick={() => onChange(label)}
            style={{
              padding: "6px 14px",
              fontSize: 12, fontWeight: 500,
              borderRadius: 999, border: "none",
              cursor: "pointer",
              background: isActive ? "#fff" : "transparent",
              color: isActive ? "#1F2433" : "#6B7280",
              boxShadow: isActive ? "0 1px 2px rgba(15,20,35,0.06)" : "none",
              transition: "all 200ms ease",
              fontFamily: "inherit",
              whiteSpace: "nowrap",
            }}
          >{label}</button>
        );
      })}
    </div>
  );
}

function TopBar({ currentAgent, search, onSearch, onRefresh, refreshDisabled, user, onSignOut }) {
  return (
    <header style={{
      height: 60, padding: "0 24px",
      borderBottom: "1px solid #ECECEA",
      background: "#fff",
      display: "flex", alignItems: "center", gap: 20,
      position: "sticky", top: 0, zIndex: 50,
      whiteSpace: "nowrap",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
        <span style={{ fontSize: 16, fontWeight: 600, color: "#1F2433", letterSpacing: -0.2, whiteSpace: "nowrap" }}>Northstar Fincorp</span>
        <span style={{ fontSize: 11, color: "#9CA3AF", padding: "2px 8px", border: "1px solid #ECECEA", borderRadius: 999, whiteSpace: "nowrap" }}>NBFC · SME Lending</span>
      </div>

      <div style={{ flex: 1, display: "flex", justifyContent: "center", minWidth: 0 }}>
        <div style={{
          width: 380, height: 36,
          display: "flex", alignItems: "center", gap: 8,
          padding: "0 12px",
          background: "#F6F6F4",
          border: "1px solid #ECECEA",
          borderRadius: 8,
        }}>
          <Icons.search size={15} style={{ color: "#9CA3AF" }} />
          <input
            value={search}
            onChange={(e) => onSearch(e.target.value)}
            placeholder="Search leads, borrowers, businesses…"
            style={{
              flex: 1, border: "none", background: "transparent",
              outline: "none", fontSize: 13, color: "#1F2433",
              fontFamily: "inherit",
            }}
          />
          <span style={{ fontSize: 10.5, color: "#9CA3AF", border: "1px solid #ECECEA", padding: "1px 6px", borderRadius: 4, background: "#fff" }}>⌘K</span>
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
        <button onClick={onRefresh} disabled={refreshDisabled} style={{
          height: 34, padding: "0 14px",
          background: "#fff", border: "1px solid #ECECEA",
          borderRadius: 7, fontSize: 12.5, fontWeight: 500,
          color: refreshDisabled ? "#9CA3AF" : "#1F2433",
          cursor: refreshDisabled ? "not-allowed" : "pointer",
          fontFamily: "inherit",
          display: "inline-flex", alignItems: "center", gap: 6,
          opacity: refreshDisabled ? 0.5 : 1,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
          </svg>
          {refreshDisabled ? "Journey Complete" : "Refresh"}
        </button>
        
        <div style={{ position: "relative", cursor: "pointer", padding: 6, borderRadius: 8 }} title="3 unread">
          <Icons.bell size={18} style={{ color: "#6B7280" }} />
          <span style={{ position: "absolute", top: 4, right: 4, width: 7, height: 7, background: "#D49A3A", borderRadius: 999, border: "1.5px solid #fff" }} />
        </div>

        {user && (
          <div style={{
            fontSize: '11px',
            color: '#6B7280',
            paddingLeft: 12,
            borderLeft: '1px solid #ECECEA',
            flexShrink: 0,
            whiteSpace: 'nowrap'
          }}>
            {user.email}
          </div>
        )}

        <div style={{ display: "flex", alignItems: "center", gap: 8, paddingLeft: 12, borderLeft: "1px solid #ECECEA", flexShrink: 0 }}>
          <div style={{ position: "relative" }}>
            <Avatar initials={currentAgent.initials} color={currentAgent.color} size={30} />
            <span style={{ position: "absolute", bottom: -1, right: -1, width: 9, height: 9, borderRadius: 999, background: "#6BAE5B", border: "2px solid #fff" }} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15, whiteSpace: "nowrap" }}>
            <span style={{ fontSize: 12.5, fontWeight: 500, color: "#1F2433" }}>{currentAgent.name}</span>
            <span style={{ fontSize: 10.5, color: "#6BAE5B" }}>● Online</span>
          </div>
        </div>

        {onSignOut && (
          <button
            onClick={onSignOut}
            style={{
              height: 34,
              padding: '0 14px',
              background: '#fff',
              border: '1px solid #ECECEA',
              borderRadius: 7,
              fontSize: 12.5,
              fontWeight: 500,
              color: '#6B7280',
              cursor: 'pointer',
              fontFamily: 'inherit',
              flexShrink: 0,
              whiteSpace: 'nowrap',
              transition: 'all 0.2s'
            }}
            onMouseOver={(e) => {
              e.target.style.background = '#F5F5F5';
              e.target.style.borderColor = '#C8C8C8';
            }}
            onMouseOut={(e) => {
              e.target.style.background = '#fff';
              e.target.style.borderColor = '#ECECEA';
            }}
          >
            Sign Out
          </button>
        )}
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, TopBar, RoleSwitcher });