// Inbox categories sidebar — phone number selector + channel sections
const NumberDropdown = () => {
  const [open, setOpen] = useState(false);
  const numbers = [
    { flag: "🇺🇸", name: "JustCall Number", phone: "+1 361 315 4472", unread: "99+" },
    { flag: "🇬🇧", name: "Sales — London", phone: "+44 20 7946 0123", unread: 4 },
    { flag: "🇮🇳", name: "Support — India", phone: "+91 80 4680 5555", unread: 12 },
    { flag: "🇨🇦", name: "Partnerships", phone: "+1 416 555 0199", unread: 0 },
  ];
  const [sel, setSel] = useState(0);
  const cur = numbers[sel];
  return (
    <div style={{ position: "relative", padding: "12px 12px 8px" }}>
      <div onClick={() => setOpen(o => !o)}
        style={{
          display: "flex", alignItems: "center", gap: 10, padding: "10px 12px",
          border: "1px solid #E4E7EC", borderRadius: 8, background: "#FFFFFF", cursor: "pointer",
          position: "relative"
        }}>
        <div style={{
          width: 28, height: 28, borderRadius: 500, flexShrink: 0,
          display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16,
          background: "#F2F4F7"
        }}>{cur.flag}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: "#101828", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {cur.name}
          </div>
          <div style={{ fontSize: 11, color: "#667085", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {cur.phone}
          </div>
        </div>
        <I.chevDown size={14} stroke="#98A2B3" />

        {cur.unread && cur.unread !== 0 && (
          <div style={{
            position: "absolute", top: -6, right: -6, minWidth: 28, height: 20, padding: "0 6px", borderRadius: 500,
            background: "#D92D20", color: "#FFFFFF", fontSize: 11, fontWeight: 700,
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 0 0 2px #FFFFFF"
          }}>{cur.unread}</div>
        )}
      </div>

      {open && (
        <div style={{
          position: "absolute", top: "calc(100% - 4px)", left: 12, right: 12, zIndex: 30,
          background: "#FFFFFF", border: "1px solid #E4E7EC", borderRadius: 8,
          boxShadow: "0 12px 24px rgba(16,24,40,0.12)", padding: 4,
          maxHeight: 320, overflowY: "auto"
        }}>
          {numbers.map((n, i) => {
            const isSel = i === sel;
            return (
              <div key={n.phone} onClick={() => { setSel(i); setOpen(false); }}
                style={{
                  display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 6,
                  cursor: "pointer", background: isSel ? "#EFF8FF" : "transparent"
                }}
                onMouseEnter={e => { if (!isSel) e.currentTarget.style.background = "#F9FAFB"; }}
                onMouseLeave={e => { if (!isSel) e.currentTarget.style.background = "transparent"; }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 500, background: "#F2F4F7",
                  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, flexShrink: 0
                }}>{n.flag}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: "#101828", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{n.name}</div>
                  <div style={{ fontSize: 11, color: "#667085", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{n.phone}</div>
                </div>
                {n.unread && n.unread !== 0 && (
                  <div style={{
                    minWidth: 20, height: 18, padding: "0 6px", borderRadius: 500, background: "#D92D20",
                    color: "#FFFFFF", fontSize: 10, fontWeight: 700,
                    display: "flex", alignItems: "center", justifyContent: "center"
                  }}>{n.unread}</div>
                )}
                {isSel && <I.check size={14} stroke="#004CE6" />}
              </div>
            );
          })}
          <div style={{ height: 1, background: "#E4E7EC", margin: "4px 4px" }} />
          <div style={{
            padding: "8px 10px", fontSize: 12, color: "#004CE6", fontWeight: 600, cursor: "pointer",
            display: "flex", alignItems: "center", gap: 6
          }}
            onMouseEnter={e => e.currentTarget.style.background = "#F9FAFB"}
            onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
            <I.plus size={13} stroke="#004CE6" /> Add number
          </div>
        </div>
      )}
    </div>
  );
};

const CatItem = ({ icon: IconC, iconColor, label, active, badge, onClick }) => (
  <div onClick={onClick}
    style={{
      display: "flex", alignItems: "center", gap: 10, padding: "8px 12px",
      borderRadius: 6, cursor: "pointer",
      background: active ? "#EFF8FF" : "transparent",
      color: active ? "#004CE6" : "#344054", fontSize: 13, fontWeight: active ? 600 : 500,
      margin: "1px 8px"
    }}
    onMouseEnter={e => { if (!active) e.currentTarget.style.background = "#F9FAFB"; }}
    onMouseLeave={e => { if (!active) e.currentTarget.style.background = "transparent"; }}>
    <IconC size={16} stroke={active ? "#004CE6" : (iconColor || "#667085")} />
    <span style={{ flex: 1 }}>{label}</span>
    {typeof badge === "number" && badge > 0 && (
      <span style={{
        minWidth: 20, height: 18, padding: "0 6px", borderRadius: 500,
        background: "#EFF8FF", color: "#004CE6", fontSize: 10, fontWeight: 600,
        display: "inline-flex", alignItems: "center", justifyContent: "center"
      }}>{badge}</span>
    )}
  </div>
);

const SectionLabel = ({ children }) => (
  <div style={{
    padding: "16px 20px 6px", fontSize: 10, fontWeight: 600, color: "#98A2B3",
    letterSpacing: 0.8, textTransform: "uppercase"
  }}>{children}</div>
);

const InboxCategories = ({ activeCat = "inbox", onCatChange }) => {
  return (
    <div style={{
      width: 248, background: "#FFFFFF", borderRight: "1px solid #E4E7EC",
      display: "flex", flexDirection: "column", flexShrink: 0
    }}>
      <NumberDropdown />

      <SectionLabel>SMS &amp; MMS</SectionLabel>
      <CatItem icon={I.chat} label="Inbox" active={activeCat === "inbox"} onClick={() => onCatChange?.("inbox")} />
      <CatItem icon={I.contact} label="Assigned to Me" active={activeCat === "assigned"} onClick={() => onCatChange?.("assigned")} />
      <CatItem icon={I.userX} label="Unassigned" active={activeCat === "unassigned"} onClick={() => onCatChange?.("unassigned")} />
      <CatItem icon={I.paperclip} label="Drafts" badge={3} active={activeCat === "drafts"} onClick={() => onCatChange?.("drafts")} />
      <CatItem icon={I.clock} label="Scheduled" active={activeCat === "scheduled"} onClick={() => onCatChange?.("scheduled")} />
      <CatItem icon={I.archive} label="Archived" active={activeCat === "archived"} onClick={() => onCatChange?.("archived")} />

      <SectionLabel>Other Channels</SectionLabel>
      <CatItem icon={I.whatsapp} iconColor="#12B76A" label="WhatsApp" active={activeCat === "whatsapp"} onClick={() => onCatChange?.("whatsapp")} />
      <CatItem icon={I.groupSms} iconColor="#F79009" label="Group SMS" active={activeCat === "groupsms"} onClick={() => onCatChange?.("groupsms")} />

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

window.InboxCategories = InboxCategories;