import React from 'react';
import { cn } from '../../shared/utils';
import { mapOverlayPositionClasses } from '../map/map-overlay-position';
import { resolveScale } from '../map/map-scale';
import { useMapTokenColors, withAlpha } from '../map/use-map-token-color';
import type { ColorToken, MapOverlayPosition, MapScale } from '../map/map.types';

/** Glyph used to represent a series in the color key. */
export type MapLegendShape = 'circle' | 'square' | 'line' | 'pin';

export interface MapLegendItem {
  /** Semantic token, e.g. `'--chart-1'`. Never a hex literal. */
  colorToken: ColorToken;
  label: string;
  /** @default 'circle' */
  shape?: MapLegendShape;
  /** Fill translucency, matched to the feature being described. @default 0.85 */
  fillOpacity?: number;
}

export interface MapLegendSizeKey {
  /** Representative values to draw, smallest first. */
  values: number[];
  /**
   * The same scale the markers use. `scale.value` is ignored — each entry of
   * `values` is substituted in turn — but the field is part of `MapScale`, so
   * pass the marker's scale object straight through.
   */
  scale: MapScale;
  /** Appended after each value, e.g. `'un.'` or `'km²'`. */
  unit?: string;
  /** Color of the sample discs. @default '--primary' */
  colorToken?: ColorToken;
  /** @default 0.45 */
  fillOpacity?: number;
}

export interface MapLegendProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * `'overlay'` floats over the map and must sit inside a positioned ancestor —
   * wrap the map and the legend in a `relative` container. `'inline'` flows in
   * normal layout, for legends placed beside or below the map.
   * @default 'inline'
   */
  variant?: 'overlay' | 'inline';
  /** Anchor for `variant="overlay"`. @default 'bottom-left' */
  position?: MapOverlayPosition;
  /** Color key: one entry per series or choropleth class. */
  items?: MapLegendItem[];
  /** Size key: what the radius of a proportional symbol means. */
  sizeKey?: MapLegendSizeKey;
  title?: string;
  /** Accessible name when no `title` is shown. @default "Map legend" */
  ariaLabel?: string;
}

const DEFAULT_ITEM_OPACITY = 0.85;
const DEFAULT_SIZE_KEY_OPACITY = 0.45;
const DEFAULT_SIZE_KEY_TOKEN: ColorToken = '--primary';

function LegendGlyph({ shape, color }: { shape: MapLegendShape; color: string }) {
  if (shape === 'line') {
    return (
      <span
        aria-hidden="true"
        className="inline-block h-0.5 w-4 shrink-0 rounded-full"
        style={{ backgroundColor: color }}
      />
    );
  }

  if (shape === 'pin') {
    return (
      <span
        aria-hidden="true"
        className="inline-block size-3 shrink-0 border border-background"
        style={{ backgroundColor: color, borderRadius: '50% 50% 50% 0', rotate: '-45deg' }}
      />
    );
  }

  return (
    <span
      aria-hidden="true"
      className="inline-block size-3 shrink-0"
      style={{ backgroundColor: color, borderRadius: shape === 'circle' ? '50%' : 2 }}
    />
  );
}

/**
 * Reads the color and size encodings of a map.
 *
 * @description
 * Every surveyed application rebuilt this by hand as a row of `<span>`s with a
 * colored dot — and none of them shipped a size key at all, which left
 * proportional symbols unreadable: a disc twice as wide means nothing without a
 * stated scale. Both keys derive from the same sources as the map itself
 * (`useMapTokenColors` and `resolveScale`), so the legend cannot drift out of
 * step with the symbols it describes.
 *
 * @ai-rules
 * 1. Always pair a `<Map>` using `markers[].scale` with a `sizeKey` built from the same scale object.
 * 2. Use `colorToken`, never a hex literal — the legend must follow the theme along with the map.
 * 3. For `variant="overlay"`, wrap the map and the legend in a `relative` container.
 */
export const MapLegend = React.forwardRef<HTMLDivElement, MapLegendProps>(
  (
    {
      variant = 'inline',
      position = 'bottom-left',
      items = [],
      sizeKey,
      title,
      ariaLabel = 'Map legend',
      className,
      ...props
    },
    ref
  ) => {
    const sizeKeyToken = sizeKey?.colorToken ?? DEFAULT_SIZE_KEY_TOKEN;

    const tokens = React.useMemo(() => {
      const set = new Set<ColorToken>(items.map(item => item.colorToken));
      if (sizeKey) set.add(sizeKeyToken);
      return Array.from(set);
    }, [items, sizeKey, sizeKeyToken]);

    const colors = useMapTokenColors(tokens);

    const sizeSamples = React.useMemo(() => {
      if (!sizeKey) return [];

      return sizeKey.values.map(value => ({
        value,
        radius: resolveScale({ ...sizeKey.scale, value }),
      }));
    }, [sizeKey]);

    const largestRadius = sizeSamples.reduce((max, sample) => Math.max(max, sample.radius), 0);

    return (
      <div
        ref={ref}
        role="group"
        aria-label={title || ariaLabel}
        className={cn(
          'rounded-[var(--radius-card)] border border-border bg-background/90 p-3 text-xs shadow-sm backdrop-blur-sm',
          variant === 'overlay' && mapOverlayPositionClasses(position),
          className
        )}
        {...props}
      >
        {title ? <p className="mb-2 font-medium text-foreground">{title}</p> : null}

        {items.length > 0 ? (
          <ul className="space-y-1.5">
            {items.map(item => (
              <li key={`${item.colorToken}-${item.label}`} className="flex items-center gap-2">
                <LegendGlyph
                  shape={item.shape ?? 'circle'}
                  color={withAlpha(
                    colors[item.colorToken] ?? '',
                    item.fillOpacity ?? DEFAULT_ITEM_OPACITY
                  )}
                />
                <span className="text-muted-foreground">{item.label}</span>
              </li>
            ))}
          </ul>
        ) : null}

        {sizeSamples.length > 0 ? (
          <div className={cn(items.length > 0 && 'mt-3 border-t border-border pt-3')}>
            <ul className="flex items-end gap-3">
              {sizeSamples.map(sample => (
                <li key={sample.value} className="flex flex-col items-center gap-1">
                  <span
                    aria-hidden="true"
                    className="block shrink-0 rounded-full border border-background"
                    style={{
                      width: sample.radius * 2,
                      height: sample.radius * 2,
                      backgroundColor: withAlpha(
                        colors[sizeKeyToken] ?? '',
                        sizeKey?.fillOpacity ?? DEFAULT_SIZE_KEY_OPACITY
                      ),
                      // Bottom-align the discs so the growth reads as a series.
                      marginTop: largestRadius * 2 - sample.radius * 2,
                    }}
                  />
                  <span className="text-[10px] leading-none text-muted-foreground tabular-nums">
                    {sample.value}
                    {sizeKey?.unit ? ` ${sizeKey.unit}` : ''}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        ) : null}
      </div>
    );
  }
);
MapLegend.displayName = 'MapLegend';