import React from "react";

/**
 * Single aligned row: date range, inline metrics, primary CTA.
 * @param {{
 *   range: string,
 *   onRangeChange: (v: string) => void,
 *   approvedCount: number,
 *   overdueCount: number,
 *   onViewActivityLog: () => void,
 *   onOverdueAction: () => void,
 * }} props
 */
const DashboardOverviewToolbar = ({
  range,
  onRangeChange,
  approvedCount,
  overdueCount,
  onViewActivityLog,
  onOverdueAction,
}) => {
  return (
    <div className="portal-dashboard-toolbar">
      <label className="portal-inline-filter">
        <span className="portal-inline-filter__label">Show data for</span>
        <select
          className="portal-select portal-select--toolbar"
          value={range}
          onChange={(e) => onRangeChange(e.target.value)}
        >
          <option value="7">Last 7 days</option>
          <option value="30">Last 30 days</option>
          <option value="90">Last 90 days</option>
          <option value="365">Last 12 months</option>
        </select>
      </label>

      <div className="portal-toolbar-metrics" role="group" aria-label="Key counts">
        <div className="portal-metric-chip">
          <span className="portal-metric-chip__value">{approvedCount}</span>
          <span className="portal-metric-chip__label">Approved / published</span>
        </div>
        <button
          type="button"
          className={`portal-metric-chip portal-metric-chip--action${overdueCount > 0 ? " portal-metric-chip--warn" : ""}`}
          onClick={onOverdueAction}
          title="Open document registry to address overdue reviews"
        >
          <span className="portal-metric-chip__value">{overdueCount}</span>
          <span className="portal-metric-chip__label">Reviews overdue</span>
        </button>
      </div>

      <button type="button" className="swi-btn swi-btn--primary portal-toolbar-cta" onClick={onViewActivityLog}>
        View activity log
      </button>
    </div>
  );
};

export default DashboardOverviewToolbar;
