// Top-bar tab strip — IDE-style, multi-tab open/close/switch.

const TabStrip = ({ tabs, activeTabId, onSelect, onClose }) => {
  return (
    <div style={{
      display: "flex", alignItems: "stretch", height: 30,
      background: "var(--bg-tab-strip)",
      borderBottom: "1px solid var(--border)",
      paddingLeft: 8, gap: 0,
      overflow: "hidden",
    }}>
      {tabs.map((t) => {
        const active = t.id === activeTabId;
        return <Tab key={t.id} tab={t} active={active} onSelect={onSelect} onClose={onClose} />;
      })}
    </div>
  );
};

const Tab = ({ tab, active, onSelect, onClose }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={() => onSelect(tab.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        display: "flex", alignItems: "center", gap: 6,
        height: "100%", padding: "0 12px",
        background: active ? "var(--bg-tab-active)" : hover ? "rgba(255,255,255,0.5)" : "transparent",
        borderTop: active ? "2px solid var(--accent)" : "2px solid transparent",
        borderLeft: "1px solid var(--border)",
        borderRight: "1px solid var(--border)",
        marginRight: -1,
        cursor: "pointer", fontSize: 12,
        color: active ? "var(--text)" : "var(--text-muted)",
        fontWeight: active ? 500 : 400,
        whiteSpace: "nowrap",
      }}
    >
      <span>{tab.label}</span>
      {tab.closable !== false ? (
        <span
          onClick={(e) => { e.stopPropagation(); onClose(tab.id); }}
          style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            width: 14, height: 14, color: "var(--text-faint)",
            borderRadius: 2,
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--danger)";
            e.currentTarget.style.color = "#fff";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "transparent";
            e.currentTarget.style.color = "var(--text-faint)";
          }}
        >
          <Ic.close size={10} />
        </span>
      ) : null}
    </div>
  );
};

window.TabStrip = TabStrip;