"use client";

import { useTranslation } from "react-i18next";

import type { SettlementPeriodRow } from "@/api/admin-agent-settlement";
import {
  AgentSettlementPeriodSelect,
  type AgentSettlementPeriodFilter,
} from "@/modules/settlement/agent-settlement-period-select";
import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";
import { settlementPeriodStatusLabel } from "@/modules/settlement/settlement-status-label";

type SettlementPeriodToolbarProps = {
  periods: SettlementPeriodRow[];
  value: AgentSettlementPeriodFilter;
  onChange: (next: AgentSettlementPeriodFilter) => void;
};

export function SettlementPeriodToolbar({
  periods,
  value,
  onChange,
}: SettlementPeriodToolbarProps): React.ReactElement | null {
  const { t } = useTranslation("settlementCenter");

  if (periods.length === 0) {
    return null;
  }

  const selected =
    typeof value === "number" ? periods.find((row) => row.id === value) ?? null : null;

  return (
    <div className="flex flex-wrap items-center gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
      <span className="text-sm font-medium text-foreground">
        {t("filters.period", { defaultValue: "账期范围" })}
      </span>
      <AgentSettlementPeriodSelect periods={periods} value={value} onChange={onChange} />
      {selected ? (
        <span className="text-sm text-muted-foreground">
          {formatSettlementPeriodSpan(selected.period_start, selected.period_end)}
          {` · ${settlementPeriodStatusLabel(selected.status, t)}`}
        </span>
      ) : (
        <span className="text-sm text-muted-foreground">
          {t("filters.allPeriods", { defaultValue: "全部账期" })}
        </span>
      )}
    </div>
  );
}
