// @design-system: domain/MapThumbnail

import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';

/** Props for MapThumbnail */
export interface MapThumbnailProps {
  lat: number;
  lng: number;
  address: string;
  /** Additional class names. */
  className?: string;
}

/**
 * MapThumbnail - static placeholder block with pin icon.
 * On tap opens maps via `geo:` URL (falls back to Google Maps web URL).
 *
 * NOTE: Real static map images will be wired in Phase 3.
 *
 * @example
 * ```tsx
 * <MapThumbnail lat={32.08} lng={34.78} address="Dizengoff 12, Tel Aviv" />
 * ```
 */
export function MapThumbnail({ lat, lng, address, className }: MapThumbnailProps) {
  const t = useT('domain_map');

  const geoUrl = `geo:${lat},${lng}?q=${encodeURIComponent(address)}`;
  const mapsUrl = `https://maps.google.com/?q=${encodeURIComponent(address)}&ll=${lat},${lng}`;

  // Prefer geo: URI (opens native maps app); fall back to Google Maps web URL.
  // Implemented as an <a> so the browser/OS can handle geo: links natively.
  const href = typeof window !== 'undefined' && 'ontouchstart' in window ? geoUrl : mapsUrl;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className={cn(
        'group relative flex w-full items-center justify-center overflow-hidden rounded-xl',
        'bg-neutral-100 text-neutral-400',
        'hover:bg-neutral-200',
        'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
        'transition-colors',
        className,
      )}
      style={{ minHeight: '7.5rem' }}
      aria-label={`${t('open_in_maps')}: ${address}`}
    >
      {/* Placeholder map background */}
      <div
        className="absolute inset-0"
        style={{ backgroundImage: 'var(--gradient-map-thumbnail)' }}
        aria-hidden="true"
      />

      {/* Pin icon + label */}
      <div className="relative flex flex-col items-center gap-1">
        <Icon
          name="MapPin"
          size="lg"
          color="primary"
          className="transition-transform group-hover:scale-110 motion-reduce:transition-none"
        />
        <span className="text-brand-primary-700 rounded bg-white/90 px-2 py-0.5 text-xs font-medium shadow-sm">
          {t('open_in_maps')}
        </span>
        <p className="line-clamp-2 max-w-32 text-center text-xs text-neutral-500">{address}</p>
      </div>
    </a>
  );
}