Header Report

"use client";

import { useId, useState } from "react";
import { Calendar, Download, RefreshCw } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderReportProps {
  title?: string;
  periods?: string[];
  defaultPeriod?: string;
  onPeriodChange?: (period: string) => void;
  entities?: string[];
  updated?: string;
  className?: string;
}

/** Report header: title with “last updated” + refresh, a toolbar with period segmented control, entity select, compare toggle and Export; wraps on mobile. */
export function HeaderReport({
  title = "Accounts receivable aging",
  periods = ["MTD", "QTD", "YTD", "Custom"],
  defaultPeriod = "QTD",
  onPeriodChange,
  entities = ["All entities", "Ledgerly Inc. (US)", "Ledgerly GmbH (DE)", "Ledgerly Ltd (UK)"],
  updated = "Updated 4 min ago",
  className,
}: HeaderReportProps) {
  const [period, setPeriod] = useState(defaultPeriod);
  const [compare, setCompare] = useState(true);
  const id = useId();
  return (
    <header className={cn("border-b border-da-border bg-da-surface text-da-surface-fg", className)}>
      <div className="flex flex-wrap items-center justify-between gap-3 px-4 pt-5 sm:px-6 lg:px-8">
        <h1 className="font-da-display text-xl font-extrabold tracking-da-display">{title}</h1>
        <p className="flex items-center gap-2 text-xs text-da-muted-fg">
          {updated}
          <button type="button" aria-label="Refresh data" className="da-focus grid size-7 place-items-center rounded-da-md hover:bg-da-muted hover:text-da-fg">
            <RefreshCw aria-hidden className="size-3.5" />
          </button>
        </p>
      </div>
      <div role="toolbar" aria-label="Report options" className="flex flex-wrap items-center gap-2 px-4 pt-4 pb-4 sm:px-6 lg:px-8">
        <div role="radiogroup" aria-label="Period" className="da-stroke inline-flex overflow-hidden rounded-da-md">
          {periods.map((p) => (
            <button
              key={p}
              type="button"
              role="radio"
              aria-checked={p === period}
              onClick={() => {
                setPeriod(p);
                onPeriodChange?.(p);
              }}
              className={cn(
                "da-focus h-9 border-da-border px-3 text-sm font-medium not-first:border-l focus-visible:relative",
                p === period ? "bg-da-surface-2 font-semibold text-da-fg" : "text-da-muted-fg hover:text-da-fg",
              )}
            >
              {p === "Custom" && <Calendar aria-hidden className="mr-1 inline size-3.5" />}
              {p}
            </button>
          ))}
        </div>
        <label className="sr-only" htmlFor={id}>
          Entity
        </label>
        <select id={id} className="da-focus da-stroke h-9 rounded-da-md bg-da-surface px-2.5 text-sm">
          {entities.map((e) => (
            <option key={e}>{e}</option>
          ))}
        </select>
        <label className="flex h-9 cursor-pointer items-center gap-2 px-1 text-sm">
          <input type="checkbox" checked={compare} onChange={(e) => setCompare(e.target.checked)} className="da-focus size-4 accent-(--da-primary)" />
          Compare to prior period
        </label>
        <button
          type="button"
          className="da-focus da-stroke ml-auto inline-flex h-9 items-center gap-2 rounded-da-md bg-da-surface px-3 text-sm font-semibold hover:border-da-border-strong"
        >
          <Download aria-hidden className="size-4" /> Export
        </button>
      </div>
    </header>
  );
}

export default HeaderReport;