import React, { useState } from 'react';
import { RouteMap } from '../ui/route-map';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
import { Badge } from '../ui/badge';
import { Button } from '../ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Navigation, Car, PersonStanding, Bike, Clock, MapPin } from 'lucide-react';

/**
 * RouteMapExamples - Exemplos práticos de mapas com rotas
 *
 * Demonstra diferentes casos de uso para o componente RouteMap:
 * - Rotas de entrega
 * - Rotas turísticas
 * - Diferentes modos de transporte
 * - Rotas com múltiplos waypoints
 */

// 1. Rota de Entrega Simples
export function DeliveryRouteMap() {
  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);

  const origin = { lat: -23.5505, lng: -46.6333 }; // Avenida Paulista
  const destination = { lat: -23.5613, lng: -46.6563 }; // Parque Ibirapuera

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
          <Car className="w-5 h-5 text-primary" />
          <CardTitle>Rota de Entrega</CardTitle>
        </div>
        <CardDescription>Calcule o tempo e distância para sua entrega</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <RouteMap
          origin={origin}
          destination={destination}
          travelMode="DRIVING"
          height="400px"
          onRouteCalculated={(distance, duration) => {
            setRouteInfo({ distance, duration });
          }}
        />

        {routeInfo && (
          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-muted rounded-lg">
              <div className="flex items-center gap-2 mb-1">
                <Navigation className="w-4 h-4 text-muted-foreground" />
                <span className="text-xs text-muted-foreground">Distância</span>
              </div>
              <p className="text-lg font-semibold">{routeInfo.distance}</p>
            </div>
            <div className="p-3 bg-muted rounded-lg">
              <div className="flex items-center gap-2 mb-1">
                <Clock className="w-4 h-4 text-muted-foreground" />
                <span className="text-xs text-muted-foreground">Tempo</span>
              </div>
              <p className="text-lg font-semibold">{routeInfo.duration}</p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// 2. Rota Turística com Múltiplos Pontos
export function TouristRouteMap() {
  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);

  const route = {
    origin: { lat: -23.5505, lng: -46.6333 }, // Av. Paulista
    destination: { lat: -23.5475, lng: -46.6361 }, // MASP
    waypoints: [
      { lat: -23.5558, lng: -46.6396 }, // Parque Trianon
      { lat: -23.5506, lng: -46.6378 }, // Casa das Rosas
    ],
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Rota Turística - Avenida Paulista</CardTitle>
        <CardDescription>Roteiro a pé pelos principais pontos turísticos</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <RouteMap
          origin={route.origin}
          destination={route.destination}
          waypoints={route.waypoints}
          travelMode="WALKING"
          height="450px"
          onRouteCalculated={(distance, duration) => {
            setRouteInfo({ distance, duration });
          }}
        />

        <div className="space-y-2">
          <h4 className="text-sm font-medium">Pontos da Rota:</h4>
          <div className="space-y-1.5">
            <div className="flex items-center gap-2 text-sm">
              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">
                A
              </Badge>
              <span>Início - Avenida Paulista</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">
                C
              </Badge>
              <span>Parque Trianon</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">
                D
              </Badge>
              <span>Casa das Rosas</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <Badge variant="outline" className="w-6 h-6 flex items-center justify-center p-0">
                B
              </Badge>
              <span>Fim - MASP</span>
            </div>
          </div>
        </div>

        {routeInfo && (
          <div className="p-4 bg-green-50 dark:bg-green-950 rounded-lg border border-green-200 dark:border-green-800">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <PersonStanding className="w-5 h-5 text-green-600 dark:text-green-400" />
                <span className="text-sm text-green-900 dark:text-green-100">
                  <strong>Caminhada:</strong> {routeInfo.distance} em {routeInfo.duration}
                </span>
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// 3. Comparação de Modos de Transporte
export function TransportModeComparison() {
  const [selectedMode, setSelectedMode] = useState<'DRIVING' | 'WALKING' | 'BICYCLING'>('DRIVING');
  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);

  const origin = { lat: -23.5505, lng: -46.6333 };
  const destination = { lat: -23.5613, lng: -46.6563 };

  const modes = [
    { value: 'DRIVING' as const, label: 'Carro', icon: Car, color: 'blue' },
    { value: 'WALKING' as const, label: 'A Pé', icon: PersonStanding, color: 'green' },
    { value: 'BICYCLING' as const, label: 'Bicicleta', icon: Bike, color: 'orange' },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle>Comparação de Transportes</CardTitle>
        <CardDescription>Veja o tempo e distância para cada modo de transporte</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex gap-2">
          {modes.map(mode => {
            const Icon = mode.icon;
            return (
              <Button
                key={mode.value}
                variant={selectedMode === mode.value ? 'default' : 'outline'}
                size="sm"
                onClick={() => setSelectedMode(mode.value)}
                className="flex-1"
              >
                <Icon className="w-4 h-4 mr-2" />
                {mode.label}
              </Button>
            );
          })}
        </div>

        <RouteMap
          origin={origin}
          destination={destination}
          travelMode={selectedMode}
          height="400px"
          onRouteCalculated={(distance, duration) => {
            setRouteInfo({ distance, duration });
          }}
        />

        {routeInfo && (
          <div className="grid grid-cols-2 gap-3">
            <div className="p-4 bg-muted rounded-lg text-center">
              <p className="text-2xl font-bold">{routeInfo.distance}</p>
              <p className="text-xs text-muted-foreground mt-1">Distância total</p>
            </div>
            <div className="p-4 bg-muted rounded-lg text-center">
              <p className="text-2xl font-bold">{routeInfo.duration}</p>
              <p className="text-xs text-muted-foreground mt-1">Tempo estimado</p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// 4. Rota de Entrega com Múltiplas Paradas
export function MultiStopDeliveryRoute() {
  const [routeInfo, setRouteInfo] = useState<{ distance: string; duration: string } | null>(null);

  const deliveryRoute = {
    origin: { lat: -23.5505, lng: -46.6333 }, // Base
    destination: { lat: -23.5505, lng: -46.6333 }, // Retorno à base
    waypoints: [
      { lat: -23.5558, lng: -46.65 }, // Cliente 1
      { lat: -23.5475, lng: -46.6361 }, // Cliente 2
      { lat: -23.5613, lng: -46.6563 }, // Cliente 3
    ],
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Rota de Entrega - Múltiplas Paradas</CardTitle>
            <CardDescription>
              Otimize sua rota de entregas com paradas intermediárias
            </CardDescription>
          </div>
          <Badge variant="secondary">{deliveryRoute.waypoints.length} paradas</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <RouteMap
          origin={deliveryRoute.origin}
          destination={deliveryRoute.destination}
          waypoints={deliveryRoute.waypoints}
          travelMode="DRIVING"
          height="450px"
          onRouteCalculated={(distance, duration) => {
            setRouteInfo({ distance, duration });
          }}
        />

        <div className="space-y-3">
          <div className="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-950 rounded-lg border border-blue-200 dark:border-blue-800">
            <div className="flex items-center gap-2">
              <MapPin className="w-4 h-4 text-blue-600 dark:text-blue-400" />
              <span className="text-sm text-blue-900 dark:text-blue-100">
                <strong>Base Central</strong> → 3 entregas → Retorno
              </span>
            </div>
          </div>

          {routeInfo && (
            <div className="grid grid-cols-2 gap-3">
              <div className="p-3 bg-muted rounded-lg">
                <p className="text-sm text-muted-foreground mb-1">Distância Total</p>
                <p className="text-xl font-semibold">{routeInfo.distance}</p>
              </div>
              <div className="p-3 bg-muted rounded-lg">
                <p className="text-sm text-muted-foreground mb-1">Tempo Total</p>
                <p className="text-xl font-semibold">{routeInfo.duration}</p>
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

// 5. Showcase Completo com Tabs
export function RouteMapShowcase() {
  return (
    <div className="space-y-6 max-w-6xl mx-auto">
      <div className="space-y-2">
        <h2 className="text-2xl">Route Maps</h2>
        <p className="text-muted-foreground">
          Exemplos de mapas com rotas calculadas automaticamente usando Google Maps Directions API
        </p>
      </div>

      <Tabs defaultValue="delivery" className="space-y-4">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="delivery">
            <Car className="w-4 h-4 mr-2" />
            Entrega
          </TabsTrigger>
          <TabsTrigger value="tourist">
            <PersonStanding className="w-4 h-4 mr-2" />
            Turismo
          </TabsTrigger>
          <TabsTrigger value="transport">
            <Bike className="w-4 h-4 mr-2" />
            Comparação
          </TabsTrigger>
          <TabsTrigger value="multistop">
            <MapPin className="w-4 h-4 mr-2" />
            Multi-paradas
          </TabsTrigger>
        </TabsList>

        <TabsContent value="delivery">
          <DeliveryRouteMap />
        </TabsContent>

        <TabsContent value="tourist">
          <TouristRouteMap />
        </TabsContent>

        <TabsContent value="transport">
          <TransportModeComparison />
        </TabsContent>

        <TabsContent value="multistop">
          <MultiStopDeliveryRoute />
        </TabsContent>
      </Tabs>
    </div>
  );
}