import React from 'react';
import { Map } from '../ui/map';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { MapPin, Navigation, Store, Heart } from 'lucide-react';

/**
 * Exemplos práticos de uso do componente Map
 * Demonstra diferentes casos de uso do mundo real
 */

// 1. Mapa de Loja com Raio de Entrega
export function StoreDeliveryMap() {
  const storeLocation = { lat: -23.5505, lng: -46.6333 };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
          <Store className="w-5 h-5 text-primary" />
          <CardTitle>Área de Entrega</CardTitle>
        </div>
        <CardDescription>Realizamos entregas em um raio de 5km da nossa loja</CardDescription>
      </CardHeader>
      <CardContent>
        <Map
          center={storeLocation}
          zoom={13}
          markers={[
            {
              position: storeLocation,
              title: 'Nossa Loja',
              info: 'Avenida Paulista, 1000',
            },
          ]}
          circle={{
            center: storeLocation,
            radius: 5000,
            fillColor: '#10B981',
            strokeColor: '#059669',
          }}
          height="400px"
        />
        <div className="mt-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <MapPin className="w-4 h-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">Cobertura de 5km</span>
          </div>
          <Button size="sm">
            <Navigation className="w-4 h-4 mr-2" />
            Como Chegar
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

// 2. Mapa de Locais Favoritos
export function FavoritePlacesMap() {
  const favorites = [
    {
      position: { lat: -23.5505, lng: -46.6333 },
      label: '⭐',
      title: 'Restaurante Favorito',
      info: 'Melhor pizza da cidade!',
    },
    {
      position: { lat: -23.5475, lng: -46.6361 },
      label: '☕',
      title: 'Cafeteria',
      info: 'Café artesanal',
    },
    {
      position: { lat: -23.5613, lng: -46.6563 },
      label: '🏃',
      title: 'Parque',
      info: 'Local de corrida matinal',
    },
    {
      position: { lat: -23.5558, lng: -46.6396 },
      label: '🎬',
      title: 'Cinema',
      info: 'Cinema independente',
    },
  ];

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Heart className="w-5 h-5 text-destructive" />
            <CardTitle>Meus Lugares Favoritos</CardTitle>
          </div>
          <Badge variant="secondary">{favorites.length} locais</Badge>
        </div>
        <CardDescription>Lugares que você marcou como favoritos</CardDescription>
      </CardHeader>
      <CardContent>
        <Map
          center={{ lat: -23.5505, lng: -46.6333 }}
          zoom={13}
          markers={favorites}
          height="450px"
        />
      </CardContent>
    </Card>
  );
}

// 3. Mapa de Escritórios da Empresa
export function CompanyOfficesMap() {
  const offices = [
    {
      position: { lat: -23.5505, lng: -46.6333 },
      label: 'HQ',
      title: 'Sede - São Paulo',
      info: 'Matriz da empresa - 200 funcionários',
    },
    {
      position: { lat: -22.9068, lng: -43.1729 },
      label: 'RJ',
      title: 'Filial - Rio de Janeiro',
      info: 'Escritório regional - 80 funcionários',
    },
    {
      position: { lat: -19.9167, lng: -43.9345 },
      label: 'BH',
      title: 'Filial - Belo Horizonte',
      info: 'Centro de distribuição - 50 funcionários',
    },
    {
      position: { lat: -25.4284, lng: -49.2733 },
      label: 'CWB',
      title: 'Filial - Curitiba',
      info: 'Centro de tecnologia - 120 funcionários',
    },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle>Nossos Escritórios</CardTitle>
        <CardDescription>Presença em 4 estados brasileiros</CardDescription>
      </CardHeader>
      <CardContent>
        <Map
          center={{ lat: -22.5, lng: -45.0 }}
          zoom={6}
          markers={offices}
          height="500px"
          zoomControl={true}
          fullscreenControl={true}
        />
        <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2">
          {offices.map((office, index) => (
            <div key={index} className="text-center p-3 bg-muted rounded-lg">
              <div className="text-2xl mb-1">{office.label}</div>
              <p className="text-xs text-muted-foreground line-clamp-1">{office.title}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// 4. Mapa de Zona de Serviço com Polígono
export function ServiceZoneMap() {
  const serviceZone = {
    paths: [
      [
        { lat: -23.54, lng: -46.62 },
        { lat: -23.54, lng: -46.66 },
        { lat: -23.565, lng: -46.66 },
        { lat: -23.565, lng: -46.62 },
      ],
    ],
    fillColor: '#3B82F6',
    strokeColor: '#2563EB',
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Área de Atendimento</CardTitle>
        <CardDescription>Zona azul indica nossa área de serviço prioritária</CardDescription>
      </CardHeader>
      <CardContent>
        <Map
          center={{ lat: -23.5525, lng: -46.64 }}
          zoom={13}
          polygon={serviceZone}
          markers={[
            {
              position: { lat: -23.5525, lng: -46.64 },
              title: 'Central de Operações',
              info: 'Base de atendimento',
            },
          ]}
          height="450px"
        />
        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
          <p className="text-sm text-blue-900 dark:text-blue-100">
            <strong>Atendimento prioritário:</strong> Clientes dentro da zona azul recebem
            atendimento em até 2 horas.
          </p>
        </div>
      </CardContent>
    </Card>
  );
}

// 5. Grid de Mapas Compactos (Comparação)
export function CompactMapsGrid() {
  const cities = [
    {
      name: 'São Paulo',
      center: { lat: -23.5505, lng: -46.6333 },
      description: 'Maior cidade do Brasil',
    },
    {
      name: 'Rio de Janeiro',
      center: { lat: -22.9068, lng: -43.1729 },
      description: 'Cidade maravilhosa',
    },
    {
      name: 'Brasília',
      center: { lat: -15.7942, lng: -47.8822 },
      description: 'Capital federal',
    },
    {
      name: 'Salvador',
      center: { lat: -12.9714, lng: -38.5014 },
      description: 'Primeira capital',
    },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle>Principais Cidades</CardTitle>
        <CardDescription>Visão rápida das principais metrópoles brasileiras</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {cities.map((city, index) => (
            <div key={index} className="space-y-2">
              <div className="flex items-center justify-between">
                <h4 className="font-medium">{city.name}</h4>
                <Badge variant="outline">{city.description}</Badge>
              </div>
              <Map
                center={city.center}
                zoom={11}
                height="200px"
                disableDefaultUI={true}
                gestureHandling="none"
              />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}