// App shell — left sidebar + top nav bar
const { useState, useEffect, useRef, useMemo } = React;

const SidebarIcon = ({ icon: IconComp, label, active, badge, onClick }) => (
  <div
    onClick={onClick}
    title={label}
    style={{
      position: "relative", width: 48, height: 40, display: "flex", alignItems: "center", justifyContent: "center",
      borderRadius: 6, cursor: "pointer", color: active ? "#FFFFFF" : "#98A2B3",
      background: active ? "rgba(255,255,255,0.06)" : "transparent", transition: "background 0.15s, color 0.15s"
    }}
    onMouseEnter={(e) => { if (!active) { e.currentTarget.style.background = "rgba(255,255,255,0.04)"; e.currentTarget.style.color = "#D0D5DD"; } }}
    onMouseLeave={(e) => { if (!active) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#98A2B3"; } }}
  >
    {active && <div style={{ position: "absolute", left: -8, top: 8, bottom: 8, width: 3, background: "#3B82F6", borderRadius: "0 2px 2px 0" }} />}
    <IconComp size={20} />
    {badge ? (
      <div style={{
        position: "absolute", top: 4, right: 6, minWidth: 16, height: 16, padding: "0 4px", borderRadius: 8,
        background: "#D92D20", color: "#fff", fontSize: 10, fontWeight: 600, display: "flex", alignItems: "center", justifyContent: "center"
      }}>{badge}</div>
    ) : null}
  </div>
);

const LeftRail = ({ activePage = "conversations" }) => {
  const items = [
    { id: "conversations", icon: I.chat, label: "Conversations", badge: 4 },
    { id: "calls", icon: I.phone, label: "Calls" },
    { id: "dialer", icon: I.dialer, label: "Sales Dialer" },
    { id: "contacts", icon: I.contact, label: "Contacts" },
    { id: "activity", icon: I.activity, label: "Activity" },
    { id: "ai", icon: I.ai, label: "AI Voice Agent" },
    { id: "evals", icon: I.evaluations, label: "Evaluations" },
    { id: "analytics", icon: I.chart, label: "Analytics" },
    { id: "tags", icon: I.tag, label: "Tags" },
  ];
  return (
    <div style={{
      width: 68, background: "#0F1629", display: "flex", flexDirection: "column",
      alignItems: "center", padding: "14px 0 10px", borderRight: "1px solid rgba(255,255,255,0.04)", flexShrink: 0
    }}>
      {/* Logo */}
      <div style={{
        width: 36, height: 36, borderRadius: 8, background: "linear-gradient(135deg, #3B82F6 0%, #004CE6 100%)",
        display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18, fontWeight: 700, color: "#fff", fontSize: 15, letterSpacing: -0.5
      }}>JC</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1 }}>
        {items.map(it => <SidebarIcon key={it.id} icon={it.icon} label={it.label} active={it.id === activePage} badge={it.badge} />)}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, paddingTop: 8, borderTop: "1px solid rgba(255,255,255,0.06)", width: 40 }}>
        <SidebarIcon icon={I.settings} label="Settings" />
        <SidebarIcon icon={I.help} label="Help" />
      </div>
    </div>
  );
};

const TopBar = ({ user, persona, permission }) => {
  const [statusOpen, setStatusOpen] = useState(false);
  const [status, setStatus] = useState("Available");
  const statusRef = useRef(null);
  useEffect(() => {
    if (!statusOpen) return;
    const onDown = (e) => { if (statusRef.current && !statusRef.current.contains(e.target)) setStatusOpen(false); };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [statusOpen]);

  const STATUS_OPTS = [
    { label: "Available",  color: "#12B76A" },
    { label: "Busy",       color: "#F79009" },
    { label: "On a break", color: "#F79009" },
    { label: "Offline",    color: "#98A2B3" },
  ];
  const statusColor = (STATUS_OPTS.find(s => s.label === status) || STATUS_OPTS[0]).color;

  return (
    <div style={{
      height: 56, background: "#FFFFFF", borderBottom: "1px solid #E4E7EC",
      display: "flex", alignItems: "center", padding: "0 16px 0 20px", gap: 12, flexShrink: 0
    }}>
      <div className="t-h-xxl" style={{ fontWeight: 600, fontSize: 18, color: "#101828" }}>Inbox</div>

      <div style={{ flex: 1 }} />

      {/* Live Call Support — blue-outline */}
      <button style={{
        display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 12px", borderRadius: 6,
        border: "1px solid #004CE6", background: "#FFFFFF", color: "#004CE6", fontSize: 13, fontWeight: 600, cursor: "pointer"
      }}>
        <I.headset size={14} stroke="#004CE6" /> Live Call Support
      </button>

      {/* Dialer — blue solid */}
      <button style={{
        display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 14px", borderRadius: 6,
        border: "none", background: "#004CE6", color: "#FFFFFF", fontSize: 13, fontWeight: 600, cursor: "pointer"
      }}>
        <I.dialer size={14} stroke="#FFFFFF" /> Dialer
      </button>

      {/* Notification bell with red badge */}
      <button title="Notifications" style={{
        position: "relative", width: 36, height: 36, borderRadius: 500,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        border: "1px solid #E4E7EC", background: "#FFFFFF", cursor: "pointer"
      }}>
        <I.bell size={16} stroke="#667085" />
        <span style={{
          position: "absolute", top: 4, right: 5, minWidth: 15, height: 15, padding: "0 3px",
          borderRadius: 500, background: "#D92D20", color: "#FFFFFF", fontSize: 9, fontWeight: 700,
          display: "flex", alignItems: "center", justifyContent: "center", border: "2px solid #FFFFFF"
        }}>3</span>
      </button>

      {/* Status chip — Available with dropdown */}
      <div ref={statusRef} style={{ position: "relative" }}>
        <button onClick={() => setStatusOpen(o => !o)} style={{
          display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 10px 6px 12px", borderRadius: 500,
          border: "1px solid #A6F4C5", background: "#ECFDF3", color: "#027A48", fontSize: 13, fontWeight: 600, cursor: "pointer"
        }}>
          <span style={{ width: 8, height: 8, borderRadius: 500, background: statusColor }} />
          {status}
          <I.chevDown size={13} stroke="#027A48" />
        </button>
        {statusOpen && (
          <div style={{
            position: "absolute", top: "calc(100% + 6px)", right: 0, zIndex: 30,
            minWidth: 180, background: "#FFFFFF", border: "1px solid #E4E7EC", borderRadius: 6,
            boxShadow: "0 8px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04)", padding: 4
          }}>
            {STATUS_OPTS.map(s => (
              <button key={s.label}
                onClick={() => { setStatus(s.label); setStatusOpen(false); }}
                style={{
                  width: "100%", display: "flex", alignItems: "center", gap: 10,
                  padding: "8px 10px", borderRadius: 4, border: "none",
                  background: s.label === status ? "#F9FAFB" : "transparent",
                  cursor: "pointer", fontSize: 13, color: "#344054", textAlign: "left"
                }}
                onMouseEnter={e => { if (s.label !== status) e.currentTarget.style.background = "#F9FAFB"; }}
                onMouseLeave={e => { if (s.label !== status) e.currentTarget.style.background = "transparent"; }}>
                <span style={{ width: 8, height: 8, borderRadius: 500, background: s.color }} />
                {s.label}
                {s.label === status && <I.check size={13} stroke="#004CE6" style={{ marginLeft: "auto" }} />}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* User avatar */}
      <div title={`${user.name} · ${user.role}${permission === "readonly" ? " · Read-only" : ""}`} style={{
        width: 36, height: 36, borderRadius: 500, background: user.color, color: "#FFFFFF",
        display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 600,
        border: "2px solid #FFFFFF", boxShadow: "0 0 0 1px #E4E7EC", cursor: "pointer", flexShrink: 0
      }}>{user.initials}</div>
    </div>
  );
};

window.LeftRail = LeftRail;
window.TopBar = TopBar;