import React from 'react';
import { cn } from '../../shared/utils';
import { mapOverlayPositionClasses } from '../map/map-overlay-position';
import type { MapOverlayPosition } from '../map/map.types';

export type MapNoticeVariant = 'info' | 'warning' | 'synthetic';

export interface MapNoticeProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * `'synthetic'` marks demonstrative or generated data — its own variant rather
   * than a shade of `'warning'`, because "this is not real data" is a statement
   * about provenance, not a problem the user can act on.
   * @default 'info'
   */
  variant?: MapNoticeVariant;
  /** @default 'top-right' */
  position?: MapOverlayPosition;
  /**
   * `'overlay'` floats over the map and needs a positioned ancestor;
   * `'inline'` flows in normal layout.
   * @default 'overlay'
   */
  layout?: 'overlay' | 'inline';
  children: React.ReactNode;
}

const VARIANT_CLASSES: Record<MapNoticeVariant, string> = {
  info: 'border-info/40 bg-info/10 text-foreground',
  warning: 'border-warning/50 bg-warning/10 text-foreground',
  synthetic: 'border-border border-dashed bg-muted/90 text-muted-foreground',
};

/**
 * A persistent badge over the map: provenance, caveat, or attribution.
 *
 * @description
 * Two notices need to sit on the map permanently and were styled by hand,
 * theme by theme, in every surveyed application: the "demonstrative data" seal
 * and the cartographic attribution most tile licenses require. Both must stay
 * legible in light and dark without the consumer intervening, which is what the
 * token-based surfaces here provide.
 *
 * For the attribution specifically, prefer `<Map attribution="…">` — it is
 * placed and sized to the cartographic convention.
 *
 * @ai-rules
 * 1. Use `variant="synthetic"` for demo/seeded data — never `warning`, which implies a problem.
 * 2. For `layout="overlay"`, wrap the map and the notice in a `relative` container.
 * 3. Keep the text to a short phrase; a notice is a label, not a message box.
 */
export const MapNotice = React.forwardRef<HTMLDivElement, MapNoticeProps>(
  (
    { variant = 'info', position = 'top-right', layout = 'overlay', className, children, ...props },
    ref
  ) => (
    <div
      ref={ref}
      // `status` announces the notice without stealing focus, which suits a
      // permanent caveat better than `alert`.
      role="status"
      className={cn(
        'rounded-[var(--radius)] border px-2.5 py-1 text-xs font-medium shadow-sm backdrop-blur-sm',
        VARIANT_CLASSES[variant],
        layout === 'overlay' && mapOverlayPositionClasses(position),
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
);
MapNotice.displayName = 'MapNotice';