'use client';

/**
 * TokenTrendChart — Recharts LineChart showing daily token issuance counts.
 *
 * This component is designed to be lazy-loaded via `next/dynamic`. Do NOT
 * import it directly from a page; use dynamic(() => import('./TokenTrendChart'))
 * so that recharts stays out of the main bundle.
 *
 * @module components/charts/TokenTrendChart
 */

import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

/** A single data point for the token trend line chart. */
export interface TokenTrendDataPoint {
  /** ISO 8601 date string (e.g. "2026-03-01"). */
  date: string;
  /** Number of tokens issued on this date. */
  count: number;
}

/** Props for the TokenTrendChart component. */
export interface TokenTrendChartProps {
  /** Array of daily token issuance data points, sorted ascending by date. */
  data: TokenTrendDataPoint[];
}

/**
 * Formats an ISO date string as a short label (e.g. "Mar 1").
 *
 * @param dateStr - ISO 8601 date string
 * @returns Formatted short date label
 */
function formatDateLabel(dateStr: string): string {
  const d = new Date(dateStr);
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

/**
 * Renders a responsive line chart of daily token issuance counts using recharts.
 *
 * @param props - TokenTrendChartProps
 * @returns JSX element
 */
export default function TokenTrendChart({
  data,
}: TokenTrendChartProps): React.ReactElement {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart
        data={data}
        margin={{ top: 8, right: 16, left: 0, bottom: 8 }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
        <XAxis
          dataKey="date"
          tickFormatter={formatDateLabel}
          tick={{ fontSize: 12, fill: '#64748b' }}
          tickLine={false}
          axisLine={{ stroke: '#cbd5e1' }}
          interval="preserveStartEnd"
        />
        <YAxis
          tick={{ fontSize: 12, fill: '#64748b' }}
          tickLine={false}
          axisLine={false}
          allowDecimals={false}
        />
        <Tooltip
          formatter={(value: number) => [value.toLocaleString(), 'Tokens issued']}
          labelFormatter={(label: string) => formatDateLabel(label)}
          contentStyle={{
            borderRadius: '8px',
            border: '1px solid #e2e8f0',
            fontSize: '13px',
          }}
        />
        <Line
          type="monotone"
          dataKey="count"
          stroke="#6366f1"
          strokeWidth={2}
          dot={false}
          activeDot={{ r: 4, fill: '#6366f1' }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}