// @design-system: domain/AdminTimeSeriesChart
'use client';

import { useMemo } from 'react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';
import type { TimeSeriesPoint } from '@/server/admin/resources/analytics/time-series';
import { useT, useLocale } from '@/lib/i18n/react';
import { formatCurrency, formatInteger } from '@/lib/format';

// ─── Props ────────────────────────────────────────────────────────────────────

export interface AdminTimeSeriesChartProps {
  data: TimeSeriesPoint[];
  title: string;
  format?: 'count' | 'currency' | 'usd';
  loading?: boolean;
  /** ISO period format from server: 'YYYY-MM-DDTHH:MI' */
  bucketSize?: 'd' | 'w' | 'm' | 'y' | 'all';
}

// ─── Label formatting ─────────────────────────────────────────────────────────

function formatPeriodLabel(period: string, bucketSize?: string): string {
  // period format: '2025-04-17T14:00'
  const [datePart, timePart] = period.split('T');
  if (!datePart) return period;
  const [, month, day] = datePart.split('-');
  if (bucketSize === 'd') {
    return timePart?.slice(0, 5) ?? period; // 'HH:MM'
  }
  if (bucketSize === 'y' || bucketSize === 'all') {
    return `${day}/${month}`; // 'DD/MM' for month start
  }
  return `${day}/${month}`; // 'DD/MM' for day
}

function formatValue(value: number, format: string | undefined, locale: 'he' | 'en'): string {
  if (format === 'currency') {
    return formatCurrency(value, locale);
  }
  if (format === 'usd') {
    return '$' + value.toFixed(2);
  }
  return formatInteger(value, locale);
}

// ─── Component ────────────────────────────────────────────────────────────────

export function AdminTimeSeriesChart({
  data,
  title,
  format = 'count',
  loading = false,
  bucketSize,
}: AdminTimeSeriesChartProps) {
  const t = useT('admin_metric_tile');
  const { locale } = useLocale();
  // Recharts forwards string values to SVG attributes — var() resolves natively in browser SVG.
  const chartColor = 'var(--color-brand-primary-600)';

  const chartData = useMemo(
    () =>
      data.map((p) => ({
        label: formatPeriodLabel(p.period, bucketSize),
        value: p.value,
      })),
    [data, bucketSize],
  );

  if (loading) {
    return (
      <div className="flex flex-col gap-2">
        <p className="text-text-primary text-sm font-semibold">{title}</p>
        <div
          className="bg-surface-subtle h-32 animate-pulse rounded-md motion-reduce:animate-none"
          aria-hidden="true"
        />
      </div>
    );
  }

  const isEmpty = data.every((p) => p.value === 0);

  return (
    <div className="flex flex-col gap-2">
      <p className="text-text-primary text-sm font-semibold">{title}</p>
      {isEmpty ? (
        <div className="bg-surface-subtle flex h-32 items-center justify-center rounded-md">
          <span className="text-text-secondary text-xs">{t('no_data')}</span>
        </div>
      ) : (
        <div aria-label={title} role="img">
          <ResponsiveContainer width="100%" height={128}>
            <AreaChart data={chartData} margin={{ top: 4, right: 4, left: 0, bottom: 0 }}>
              <defs>
                <linearGradient id={`grad-${title}`} x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor={chartColor} stopOpacity={0.25} />
                  <stop offset="95%" stopColor={chartColor} stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid
                strokeDasharray="3 3"
                stroke="var(--color-border-subtle)"
                vertical={false}
              />
              <XAxis
                dataKey="label"
                tick={{ fontSize: 10, fill: 'var(--color-text-secondary)' }}
                tickLine={false}
                axisLine={false}
                interval="preserveStartEnd"
                reversed={typeof document !== 'undefined' && document.dir === 'rtl'}
              />
              <YAxis
                tick={{ fontSize: 10, fill: 'var(--color-text-secondary)' }}
                tickLine={false}
                axisLine={false}
                width={48}
                tickFormatter={(v: number) => formatValue(v, format, locale)}
              />
              <Tooltip
                formatter={(value) => [formatValue(Number(value ?? 0), format, locale), title]}
                contentStyle={{
                  fontSize: 'var(--font-size-xs)',
                  borderRadius: 'var(--radius-md)',
                  border: '1px solid var(--color-border-default)',
                  backgroundColor: 'var(--color-surface-base)',
                  color: 'var(--color-text-primary)',
                }}
              />
              <Area
                type="monotone"
                dataKey="value"
                stroke={chartColor}
                strokeWidth={2}
                fill={`url(#grad-${title})`}
                dot={false}
                activeDot={{ r: 4 }}
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}