import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { MapProps } from '../../types';
import { MapPin, AlertTriangle } from 'lucide-react';

// Allowlisted embed domains for security
const ALLOWED_EMBED_DOMAINS = [
  'www.google.com/maps/embed',
  'maps.google.com',
  'www.openstreetmap.org',
];

function isAllowedEmbed(url: string): boolean {
  if (!url) return false;
  if (!url.startsWith('https://')) return false;

  return ALLOWED_EMBED_DOMAINS.some((domain) =>
    url.startsWith(`https://${domain}`)
  );
}

export const Map: ComponentConfig<MapProps> = {
  label: 'Map',
  fields: {
    embedUrl: {
      type: 'text',
      label: 'Google Maps Embed URL',
    },
    height: {
      type: 'number',
      label: 'Height (px)',
    },
  },
  defaultProps: {
    embedUrl: '',
    height: 400,
  },
  render: ({ embedUrl, height }) => {
    // Validate embed URL
    if (!embedUrl) {
      return (
        <div
          className="bg-gray-100 dark:bg-gray-800 rounded-lg flex flex-col items-center justify-center"
          style={{ height: `${height}px` }}
        >
          <MapPin className="w-12 h-12 text-gray-400 mb-4" />
          <p className="text-gray-500 dark:text-gray-400 text-center">
            Add a Google Maps embed URL to display a map
          </p>
          <p className="text-sm text-gray-400 dark:text-gray-500 mt-2 text-center max-w-md">
            Go to Google Maps, search for your location, click "Share" → "Embed a map" and copy the src URL from the iframe code.
          </p>
        </div>
      );
    }

    if (!isAllowedEmbed(embedUrl)) {
      return (
        <div
          className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex flex-col items-center justify-center"
          style={{ height: `${height}px` }}
        >
          <AlertTriangle className="w-12 h-12 text-red-400 mb-4" />
          <p className="text-red-600 dark:text-red-400 text-center font-medium">
            Invalid embed URL
          </p>
          <p className="text-sm text-red-500 dark:text-red-400/80 mt-2 text-center max-w-md">
            Only Google Maps and OpenStreetMap embeds are allowed for security reasons.
          </p>
        </div>
      );
    }

    return (
      <div className="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
        <iframe
          src={embedUrl}
          width="100%"
          height={height}
          style={{ border: 0 }}
          allowFullScreen
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="Location Map"
        />
      </div>
    );
  },
};

export default Map;
