import { fmtHoursMinutesSeconds, fmtUsd } from '@/lib/format'

type Props = {
  rowCount: number
  sourceSeconds: number
  cost: number
  /**
   * Owner-only: total billout amount (what Rian charges his client) for
   * the filter. Pass `null` when the viewer is not an owner — the card
   * just omits the column.
   */
  billoutAmount: number | null
}

/**
 * Stats card above the Entries table that mirrors the totals of whatever
 * the current filter matches (across all pages, not just the visible page).
 *
 * Post eliminate-proportion: there is only one "hours" stat. Cost and
 * billout are both computed per source hour; the legacy
 * converted-duration column lives on as Toggl-export plumbing only.
 */
export function EntriesSummary({
  rowCount,
  sourceSeconds,
  cost,
  billoutAmount,
}: Props) {
  return (
    <div className="panel">
      <div className="stat-row">
        <div className="stat">
          <span className="stat-label">Entries in filter</span>
          <span className="stat-value">{rowCount.toLocaleString()}</span>
        </div>
        <div className="stat">
          <span className="stat-label">Hours</span>
          <span className="stat-value">
            {fmtHoursMinutesSeconds(sourceSeconds)}
          </span>
        </div>
        <div className="stat">
          <span className="stat-label">Cost</span>
          <span className="stat-value">{fmtUsd(cost)}</span>
        </div>
        {billoutAmount != null && (
          <div className="stat">
            <span
              className="stat-label"
              title="Owner-only: total client billout for the filter."
            >
              Billout
            </span>
            <span className="stat-value" style={{ color: '#0a7d3f' }}>
              {fmtUsd(billoutAmount)}
            </span>
          </div>
        )}
      </div>
    </div>
  )
}