import React, { useState } from 'react';
import { Map } from '../ui/map';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
import { Badge } from '../ui/badge';
import { Checkbox } from '../ui/checkbox';
import { Label } from '../ui/label';

/**
 * Exemplo simples de mapa com marcadores de EMOJI e filtro
 * Demonstra uso de emojis com fundo branco para contraste
 * IMPORTANTE: Marcadores com emojis usam fundo branco (#FFFFFF)
 */

// Dados de exemplo com emojis e fundo branco
const locations = [
  {
    position: { lat: -23.5505, lng: -46.6333 },
    label: '🍕',
    title: 'Pizzaria do Bairro',
    info: 'Melhor pizza artesanal',
    color: '#FFFFFF', // Fundo branco para emojis
    iconColor: '#000000', // Texto preto para emojis (melhor contraste)
    category: 'food',
  },
  {
    position: { lat: -23.5485, lng: -46.635 },
    label: '🍣',
    title: 'Sushi Premium',
    info: 'Culinária japonesa autêntica',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'food',
  },
  {
    position: { lat: -23.5475, lng: -46.6361 },
    label: '🏨',
    title: 'Hotel Luxo',
    info: '5 estrelas com spa',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'hotel',
  },
  {
    position: { lat: -23.553, lng: -46.634 },
    label: '🏩',
    title: 'Hotel Boutique',
    info: 'Design contemporâneo',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'hotel',
  },
  {
    position: { lat: -23.5613, lng: -46.6563 },
    label: '🌳',
    title: 'Parque Ibirapuera',
    info: 'Maior parque da cidade',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'attraction',
  },
  {
    position: { lat: -23.5558, lng: -46.6396 },
    label: '🎨',
    title: 'MASP',
    info: 'Museu de Arte',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'attraction',
  },
  {
    position: { lat: -23.5465, lng: -46.64 },
    label: '🛍️',
    title: 'Shopping Center',
    info: 'Mais de 300 lojas',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'shopping',
  },
  {
    position: { lat: -23.5495, lng: -46.6345 },
    label: '☕',
    title: 'Café Artesanal',
    info: 'Café especial e brunch',
    color: '#FFFFFF',
    iconColor: '#000000',
    category: 'cafe',
  },
];

export function SimpleFilterableMap() {
  const [filters, setFilters] = useState({
    food: true,
    hotel: true,
    attraction: true,
    shopping: true,
    cafe: true,
  });

  // Filtrar marcadores
  const filteredMarkers = locations
    .filter(loc => filters[loc.category as keyof typeof filters])
    .map(loc => ({
      position: loc.position,
      label: loc.label,
      title: loc.title,
      info: loc.info,
      customColor: loc.color, // Sempre branco para emojis
      iconColor: loc.iconColor, // Texto preto para emojis
    }));

  const toggleFilter = (category: keyof typeof filters) => {
    setFilters(prev => ({ ...prev, [category]: !prev[category] }));
  };

  const filterConfig = [
    {
      id: 'food',
      label: 'Restaurantes',
      emoji: '🍕',
      color: 'var(--destructive)',
      count: locations.filter(l => l.category === 'food').length,
    },
    {
      id: 'hotel',
      label: 'Hotéis',
      emoji: '🏨',
      color: 'var(--info)',
      count: locations.filter(l => l.category === 'hotel').length,
    },
    {
      id: 'attraction',
      label: 'Atrações',
      emoji: '🌳',
      color: 'var(--success)',
      count: locations.filter(l => l.category === 'attraction').length,
    },
    {
      id: 'shopping',
      label: 'Compras',
      emoji: '🛍️',
      color: 'var(--warning)',
      count: locations.filter(l => l.category === 'shopping').length,
    },
    {
      id: 'cafe',
      label: 'Cafés',
      emoji: '☕',
      color: 'var(--primary)',
      count: locations.filter(l => l.category === 'cafe').length,
    },
  ];

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>Mapa com Emojis</CardTitle>
          <Badge variant="secondary">
            {filteredMarkers.length} de {locations.length} locais
          </Badge>
        </div>
        <CardDescription>
          Marcadores com emojis em fundo branco - Selecione as categorias para visualizar
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Filtros Compactos com Checkboxes */}
        <div className="flex flex-wrap gap-4 p-3 rounded-lg border bg-muted">
          {filterConfig.map(filter => (
            <div key={filter.id} className="flex items-center space-x-2">
              <Checkbox
                id={filter.id}
                checked={filters[filter.id as keyof typeof filters]}
                onCheckedChange={() => toggleFilter(filter.id as keyof typeof filters)}
              />
              <Label htmlFor={filter.id} className="flex items-center gap-2 cursor-pointer text-sm">
                <span className="text-base">{filter.emoji}</span>
                <span>{filter.label}</span>
                <Badge variant="outline" className="text-xs h-4 px-1">
                  {filter.count}
                </Badge>
              </Label>
            </div>
          ))}
        </div>

        {/* Mapa */}
        <Map
          center={{ lat: -23.5505, lng: -46.6333 }}
          zoom={14}
          markers={filteredMarkers}
          height="450px"
          zoomControl={true}
          fullscreenControl={true}
        />

        {/* Legenda */}
        <div className="flex flex-wrap gap-3 justify-center pt-3 border-t border-border">
          {filterConfig.map(filter => (
            <div
              key={filter.id}
              className="flex items-center gap-2 px-3 py-1 rounded-lg"
              style={{
                backgroundColor: filters[filter.id as keyof typeof filters]
                  ? `color-mix(in srgb, ${filter.color}, transparent 85%)`
                  : 'var(--muted)',
                opacity: filters[filter.id as keyof typeof filters] ? 1 : 0.5,
              }}
            >
              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: filter.color }} />
              <span className="text-base">{filter.emoji}</span>
              <span className="text-sm">{filter.label}</span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}