import React from 'react';
import { cn } from '../../shared/utils';

/**
 * Shared frame for every non-map state.
 *
 * Each state inherits the container's border, radius and height so that the
 * layout never shifts when a map turns into an empty result or an error — the
 * same contract the existing loading and missing-key states already honored.
 */
export interface MapStateFrameProps {
  height: string;
  className?: string;
  tone?: 'neutral' | 'destructive';
  children?: React.ReactNode;
}

export const MapStateFrame = React.forwardRef<
  HTMLDivElement,
  MapStateFrameProps & React.HTMLAttributes<HTMLDivElement>
>(({ height, className, tone = 'neutral', children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'relative rounded-[var(--radius-card)] overflow-hidden border',
      tone === 'destructive' ? 'border-destructive/50 bg-destructive/5' : 'border-border bg-muted',
      className
    )}
    style={{ height }}
    {...props}
  >
    <div className="absolute inset-0 flex items-center justify-center p-6">{children}</div>
  </div>
));
MapStateFrame.displayName = 'MapStateFrame';

/** Skeleton shown while the Maps script is still loading. */
export const MapLoadingState = React.forwardRef<
  HTMLDivElement,
  { height: string; className?: string } & React.HTMLAttributes<HTMLDivElement>
>(({ height, className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted animate-pulse motion-reduce:animate-none',
      className
    )}
    style={{ height }}
    {...props}
  />
));
MapLoadingState.displayName = 'MapLoadingState';

export interface MapMessageStateProps {
  title: string;
  hint?: string;
  icon: React.ReactNode;
  tone?: 'neutral' | 'destructive';
}

/** Icon + title + hint, the shape shared by the error, empty and denied states. */
export function MapMessageState({ title, hint, icon, tone = 'neutral' }: MapMessageStateProps) {
  return (
    <div className="text-center space-y-2">
      <div className={tone === 'destructive' ? 'text-destructive' : 'text-muted-foreground'}>
        {icon}
      </div>
      <p className="text-sm font-medium text-foreground">{title}</p>
      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* Icons                                                                       */
/* -------------------------------------------------------------------------- */

export function MapWarningIcon() {
  return (
    <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
      />
    </svg>
  );
}

export function MapPinIcon({ className = 'w-8 h-8' }: { className?: string }) {
  return (
    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
      />
    </svg>
  );
}

export function MapEmptyIcon() {
  return (
    <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
      />
    </svg>
  );
}

export function MapDeniedIcon() {
  return (
    <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
      />
    </svg>
  );
}