import type { DsProps } from './props';
import * as React from 'react';
import { ResponsiveContainer } from 'recharts';
import { cn } from '@/lib/utils';
import { Surface } from '@/components/ds/Surface';
import { SectionHeader } from '@/components/ds/SectionHeader';
import { EmptyState } from '@/components/ds/EmptyState';
import { SkeletonChart } from '@/components/ds/Skeleton';
import { BarChart3 } from 'lucide-react';

/**
 * The chart palette. Recharts needs literal colours, not Tailwind classes, so
 * the brand values are mirrored here — this array is the only place a chart
 * should get a colour from.
 */
export const CHART_COLORS = ['#0838E0', '#F9E547', '#333F48', '#F8E08E', '#D1E0D7', '#062BAF'];

export const CHART_TONES = {
  brand: '#0838E0',
  brandDark: '#062BAF',
  accent: '#F9E547',
  accentPale: '#F8E08E',
  navy: '#333F48',
  mint: '#D1E0D7',
  grid: 'hsl(150 8% 87%)',
  axis: 'hsl(220 9% 64%)',
};

/** Shared axis props so every chart's ticks match. */
export const AXIS_PROPS = {
  stroke: CHART_TONES.axis,
  tick: { fontSize: 11, fill: CHART_TONES.axis },
  tickLine: false,
  axisLine: false,
};

/**
 * A tooltip matching the design system's surfaces. Recharts' default is a plain
 * white box that ignores the token set.
 */
/** @param {any} props */
export function ChartTooltip({ active, payload, label, valueFormatter, labelFormatter }: DsProps) {
  if (!active || !payload?.length) return null;

  return (
    <div className="rounded-xl border border-border bg-surface px-3 py-2 shadow-lg">
      {label != null && (
        <p className="text-caption font-semibold text-ink-1 mb-1">
          {labelFormatter ? labelFormatter(label) : label}
        </p>
      )}
      <div className="space-y-0.5">
        {payload.map((entry, i) => (
          <div key={i} className="flex items-center gap-2 text-caption">
            <span
              className="w-2 h-2 rounded-full shrink-0"
              style={{ backgroundColor: entry.color || entry.fill }}
              aria-hidden="true"
            />
            <span className="text-ink-3">{entry.name}</span>
            <span className="ml-auto font-semibold text-ink-1 tabular-nums">
              {valueFormatter ? valueFormatter(entry.value) : entry.value}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

/**
 * A legend that reads as part of the card rather than as chart furniture.
 * Items: `{ label, color, value? }`.
 */
export function ChartLegend({ items = [], className }: DsProps) {
  return (
    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-2', className)}>
      {items.map((item) => (
        <div key={item.label} className="flex items-center gap-1.5">
          <span
            className="w-2.5 h-2.5 rounded-sm shrink-0"
            style={{ backgroundColor: item.color }}
            aria-hidden="true"
          />
          <span className="text-caption text-ink-3">{item.label}</span>
          {item.value != null && (
            <span className="text-caption font-semibold text-ink-1 tabular-nums">{item.value}</span>
          )}
        </div>
      ))}
    </div>
  );
}

/**
 * ChartContainer — the card a chart lives in.
 *
 * Owns the title row, the fixed plot height, the loading skeleton, the empty
 * state, and an optional headline figure. Charts inside it are pure Recharts
 * children, so swapping a bar chart for a line chart changes nothing else.
 */
/** @param {any} props */
export function ChartContainer({
  title,
  subtitle,
  icon,
  /** A big number in the top-right — an average, a total. */
  headline,
  headlineLabel,
  /** Right-aligned controls, e.g. a SegmentedToggle for the range. */
  actions,
  legend,
  height = 260,
  loading = false,
  isEmpty = false,
  emptyMessage = 'No data for this period',
  children,
  /** Skips ResponsiveContainer for children that are not Recharts charts. */
  raw = false,
  footer,
  className,
}: DsProps) {
  if (loading) return <SkeletonChart className={className} height={height} />;

  return (
    <Surface radius="xl" padding="lg" className={cn('flex flex-col', className)}>
      {(title || headline || actions) && (
        <div className="flex items-start justify-between gap-4 mb-1">
          <div className="min-w-0 flex-1">
            {title && (
              <SectionHeader
                title={title}
                subtitle={subtitle}
                icon={icon}
                className={cn(subtitle ? 'mb-0' : 'mb-0')}
              />
            )}
          </div>

          <div className="flex items-start gap-3 shrink-0">
            {actions}
            {headline != null && (
              <div className="text-right">
                <div className="text-title-lg font-heading font-bold text-krow-blue tabular-nums leading-none">
                  {headline}
                </div>
                {headlineLabel && (
                  <div className="text-[10px] uppercase tracking-wide text-ink-4 mt-1">
                    {headlineLabel}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {legend && <ChartLegend items={legend} className="mb-4 mt-3" />}

      <div className={cn('flex-1 min-w-0', !legend && 'mt-4')} style={{ minHeight: height }}>
        {isEmpty ? (
          <EmptyState icon={BarChart3} variant="filtered" title="Nothing to chart" description={emptyMessage} size="sm" />
        ) : raw ? (
          children
        ) : (
          <ResponsiveContainer width="100%" height={height}>
            {children}
          </ResponsiveContainer>
        )}
      </div>

      {footer && <div className="mt-4 pt-4 border-t border-border">{footer}</div>}
    </Surface>
  );
}