'use client';

import {ChartCard} from '@/shared/components/charts/ChartCard';
import {BarChartView} from '@/shared/components/charts/BarChartView';
import {CHART} from '@/shared/components/charts/palette';
import {formatCompact, formatDayLabel} from '@/shared/utils/format';
import type {AttendancePoint} from '@/features/staff/types/staff';
import type {Resource} from '@/shared/hooks/useResource';

/**
 * Daily attendance, stacked.
 *
 * PRESENT IS GRAY. Colouring it green produced a wall of saturated bars that
 * dominated the page and buried the only thing worth looking at — the amber
 * and red slivers. Present is the baseline, not an event; the exceptions are
 * what a merchant scans for, and they are what gets colour.
 *
 * This keeps the app's rule intact (colour marks what needs action) while
 * still letting late and absent read instantly without a legend lookup.
 *
 * Stacked rather than grouped because the meaningful quantity is the roster
 * total and how it splits — grouped bars would make you add three numbers to
 * answer "how many were rostered on Friday".
 */
export function AttendanceChart({
  resource,
}: {
  resource: Resource<AttendancePoint[]>;
}) {
  return (
    <ChartCard
      title="Attendance"
      subtitle="Daily roster split — present, late, absent"
      resource={resource}
    >
      {(d) => (
        <BarChartView
          data={d}
          xKey="t"
          xFormat={formatDayLabel}
          yFormat={formatCompact}
          isStacked
          // Encoding is forced solid: the colour already separates these three,
          // so the default hatch on the third series would be noise on top of
          // an already-unambiguous signal.
          series={[
            {key: 'present', label: 'Present', encoding: 'solid'},
            {
              key: 'late',
              label: 'Late',
              color: CHART.attention,
              encoding: 'solid',
            },
            {
              key: 'absent',
              label: 'Absent',
              color: CHART.negative,
              encoding: 'solid',
            },
          ]}
        />
      )}
    </ChartCard>
  );
}
