import type { DsProps } from '@/components/ds/props';
import React from 'react';
import { LineChart } from '@mui/x-charts';
import { cn } from '@/lib/utils';
import { chartSx, TONES, tooltipSx } from './muiChartTheme';

/**
 * Cumulative hires over time.
 *
 * Deliberately does not draw a line through a single point: with one month of
 * history there is no trend, and a chart that implies one is worse than a
 * sentence saying there is not. The empty state is the page's own copy, kept
 * intact and given the same container as the chart so the section holds its
 * shape either way.
 *
 * `points: [{ label, hires, cumulative }]` — supplied by the page.
 */
/** @param {any} props */
export function HiringTrendChart({ points = [], emptyState, className = '' }: DsProps) {
  const enough = points.length >= 2;

  return (
    <div className={cn('overflow-hidden rounded-xl border border-border bg-surface', className)}>
      {enough ? (
        <div className="px-2 pt-3 sm:px-3">
          <LineChart
            height={200}
            margin={{ top: 16, right: 16, bottom: 24, left: 8 }}
            xAxis={[{
              scaleType: 'point',
              data: points.map((p) => p.label),
            }]}
            yAxis={[{ width: 32, tickNumber: 4 }]}
            series={[{
              data: points.map((p) => p.cumulative),
              label: 'Cumulative hires',
              area: true,
              showMark: true,
              curve: 'monotoneX',
              valueFormatter: (value, ctx) => {
                const p = points[ctx?.dataIndex ?? 0];
                return `${value} total · ${p?.hires} this month`;
              },
            }]}
            colors={[TONES.brand]}
            grid={{ horizontal: true }}
            skipAnimation
            sx={{
              ...chartSx,
              ...tooltipSx,
              '& .MuiAreaElement-root': { fill: TONES.brandSoft },
              '& .MuiLineElement-root': { strokeWidth: 2 },
              '& .MuiMarkElement-root': { stroke: TONES.brand, fill: '#fff', strokeWidth: 2 },
            }}
          />
        </div>
      ) : (
        emptyState
      )}
    </div>
  );
}