src/components/TopBar.jsx

import { Menu, PanelLeftClose, Pencil } from "lucide-react";
import "./TopBar.css";
import { getNewsTimeframeLabel } from "../constants/timeframes.js";

function fmt(n) {
  if (n == null) return "—";
  if (n >= 1000) return new Intl.NumberFormat("en-US").format(n);
  return String(n);
}

function fmtTime(iso) {
  if (!iso) return "—";
  const d = new Date(iso);
  return d.toLocaleString("en-GB", {
    year: "numeric",
    month: "short",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function divLabel(d) {
  if (d == null) return { text: "—", tone: "" };
  if (d > 0.7) return { text: "high", tone: "danger" };
  if (d > 0.45) return { text: "moderate", tone: "warn" };
  return { text: "low", tone: "neutral" };
}

export default function TopBar({
  query,
  meta,
  metaLoading,
  menuOpen,
  onToggleMenu,
  onEditTopic,
}) {
  const div = divLabel(meta?.divergenceIndex);

  return (
    <div className="topbar">
      <button
        className="topbar__menu-btn"
        onClick={onToggleMenu}
        aria-label="Toggle visualization menu"
        title="Toggle visualization menu"
      >
        {menuOpen ? <PanelLeftClose size={15} /> : <Menu size={15} />}
        <span>views</span>
      </button>

      <div className="topbar__topic">
        <div className="label">Topic</div>
        <button
          className="topbar__topic-button"
          onClick={onEditTopic}
          title="Change topic"
        >
          <span className="topbar__topic-block">
            <span className="topbar__topic-text">
              {query.topic || "Untitled"}
            </span>
            <span className="topbar__topic-meta">
              {getNewsTimeframeLabel(query.newsTimeframe)}
            </span>
          </span>
          <Pencil size={14} strokeWidth={1.5} className="topbar__topic-icon" />
        </button>
      </div>

      <div className="topbar__metrics" aria-busy={metaLoading || undefined}>
        <Metric label="Articles"    value={fmt(meta?.totalArticles)} />
        <Metric label="Sources"     value={fmt(meta?.totalSources)} />
        <Metric label="Countries"   value={fmt(meta?.countriesCovered)} />
        <Metric label="Languages"   value={fmt(meta?.languagesCovered)} />
        <Metric
          label="Divergence"
          value={
            meta?.divergenceIndex != null
              ? meta.divergenceIndex.toFixed(2)
              : "—"
          }
          accent={div.tone}
          suffix={div.text}
        />
        <Metric
          label="Updated"
          value={fmtTime(meta?.lastUpdated)}
          tight
        />
      </div>
    </div>
  );
}

function Metric({ label, value, accent = "", suffix, tight = false }) {
  return (
    <div className={`metric ${tight ? "metric--tight" : ""}`}>
      <div className="label metric__label">{label}</div>
      <div className={`metric__value metric__value--${accent}`}>
        {value}
        {suffix && <span className="metric__suffix">{suffix}</span>}
      </div>
    </div>
  );
}