import React, { useState } from 'react';
import { Map, MapProps } from '../ui/map';
import { RouteMap } from '../ui/route-map';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';

export function MapGmpExample() {
  const [apiKey, setApiKey] = useState('');

  // Example markers
  const markers = [
    {
      position: { lat: -23.5505, lng: -46.6333 },
      title: 'São Paulo',
      info: 'Capital financeira',
      customColor: '#EF4444',
      icon: 'SP',
    },
    {
      position: { lat: -23.58, lng: -46.65 },
      title: 'Ibirapuera',
      info: 'Parque do Ibirapuera',
      customColor: '#10B981',
      icon: 'IB',
    },
  ];

  return (
    <div className="container mx-auto py-8 space-y-8">
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Google Maps Platform - Web Components</h1>
        <p className="text-muted-foreground">
          This example uses custom elements <code>&lt;gmp-map&gt;</code> and{' '}
          <code>&lt;gmp-advanced-marker&gt;</code> for better performance and modern integration.
        </p>

        <Card>
          <CardHeader>
            <CardTitle>API Key Configuration</CardTitle>
            <CardDescription>
              Enter your API Key to load the maps. It will be stored in the session context.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-4">
              <Input
                type="password"
                placeholder="Paste your Google Maps API Key here"
                aria-label="Google Maps API Key"
                value={apiKey}
                onChange={e => setApiKey(e.target.value)}
                className="h-10"
              />
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="standard">
        <TabsList className="mb-4">
          <TabsTrigger value="standard">Standard Map</TabsTrigger>
          <TabsTrigger value="satellite">Satellite</TabsTrigger>
          <TabsTrigger value="dark">Dark / NY</TabsTrigger>
          <TabsTrigger value="route">Route Map</TabsTrigger>
        </TabsList>

        <TabsContent value="standard" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Standard Map (&lt;gmp-map&gt;)</CardTitle>
            </CardHeader>
            <CardContent>
              <Map
                apiKey={apiKey}
                height="500px"
                zoom={12}
                center={{ lat: -23.56, lng: -46.64 }}
                markers={markers}
                circle={{
                  center: { lat: -23.5505, lng: -46.6333 },
                  radius: 1000,
                  fillColor: '#EF4444',
                }}
              />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="route" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Route Map (Hybrid)</CardTitle>
            </CardHeader>
            <CardContent>
              <RouteMap
                apiKey={apiKey}
                height="500px"
                origin={{ lat: -23.5505, lng: -46.6333 }}
                destination={{ lat: -23.58, lng: -46.65 }}
                travelMode="DRIVING"
                onRouteCalculated={(distance, duration) =>
                  console.log(`Route: ${distance}, ${duration}`)
                }
              />
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="satellite" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Satellite View</CardTitle>
            </CardHeader>
            <CardContent>
              <Map
                apiKey={apiKey}
                height="500px"
                zoom={16}
                center={{ lat: -23.5505, lng: -46.6333 }}
                mapTypeId="satellite"
                markers={[
                  {
                    position: { lat: -23.5505, lng: -46.6333 },
                    title: 'Detailed View',
                    customColor: '#ffffff',
                    iconColor: '#000000',
                    icon: '👁️',
                  },
                ]}
              />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="dark" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Dark Mode (Styled)</CardTitle>
            </CardHeader>
            <CardContent>
              <Map
                apiKey={apiKey}
                height="500px"
                zoom={12}
                center={{ lat: 40.7128, lng: -74.006 }}
                mapId="4504f8b37365c3d0" // Example Dark Map ID (won't work without config, falling back to standard if invalid)
                // Alternatively use styles prop if we supported legacy styles, but GMP recommends MapID.
                // For now, let's just show a different location and markers to varify reusability
                markers={[
                  {
                    position: { lat: 40.7128, lng: -74.006 },
                    title: 'New York',
                    customColor: '#3b82f6',
                  },
                  {
                    position: { lat: 40.758, lng: -73.9855 },
                    title: 'Times Square',
                    customColor: '#8b5cf6',
                  },
                ]}
              />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}