pn-new-crm/src/components/dashboard/occupancy-timeline-chart.tsx

'use client';

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

import { CardSkeleton } from '@/components/shared/loading-skeleton';
import { EmptyState } from '@/components/shared/empty-state';
import { ChartCard } from './chart-card';
import { useOccupancy } from './use-analytics';
import type { DateRange } from '@/lib/services/analytics.service';
import { rangeToSlug } from '@/lib/analytics/range';

interface Props {
  range: DateRange;
}

function shortDate(iso: string) {
  const d = new Date(`${iso}T00:00:00`);
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

export function OccupancyTimelineChart({ range }: Props) {
  const { data, isLoading } = useOccupancy(range);
  const points = data?.points ?? [];
  const noBerths = points.length > 0 && points[0]?.total === 0;

  function toCsv(): string | null {
    if (!points.length) return null;
    const header = 'date,occupied,total,occupancy_pct';
    const rows = points.map((p) => `${p.date},${p.occupied},${p.total},${p.occupancyPct}`);
    return [header, ...rows].join('\n');
  }

  return (
    <ChartCard
      title="Occupancy Timeline"
      description="Daily berth occupancy across the range"
      exportFilename={`occupancy-timeline-${rangeToSlug(range)}`}
      toCsv={toCsv}
    >
      {isLoading ? (
        <CardSkeleton />
      ) : noBerths ? (
        <EmptyState title="No berths configured" description="Add berths to see occupancy." />
      ) : (
        <ResponsiveContainer width="100%" height={260}>
          <AreaChart
            data={points.map((p) => ({ ...p, label: shortDate(p.date) }))}
            margin={{ top: 8, right: 8, left: -16, bottom: 8 }}
          >
            <defs>
              <linearGradient id="occupancyGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="hsl(var(--chart-2))" stopOpacity={0.4} />
                <stop offset="100%" stopColor="hsl(var(--chart-2))" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
            <XAxis
              dataKey="label"
              tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
              minTickGap={20}
            />
            <YAxis
              tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
              domain={[0, 100]}
              tickFormatter={(v: number) => `${v}%`}
            />
            <Tooltip
              contentStyle={{
                background: 'hsl(var(--popover))',
                border: '1px solid hsl(var(--border))',
                borderRadius: '6px',
                fontSize: 12,
              }}
              formatter={(value, _name, item) => {
                const p = item?.payload as { occupied?: number; total?: number } | undefined;
                return [`${value}% (${p?.occupied ?? 0}/${p?.total ?? 0})`, 'Occupancy'];
              }}
            />
            <Area
              type="monotone"
              dataKey="occupancyPct"
              stroke="hsl(var(--chart-2))"
              strokeWidth={2}
              fill="url(#occupancyGradient)"
            />
          </AreaChart>
        </ResponsiveContainer>
      )}
    </ChartCard>
  );
}