import Image from 'next/image';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { PlaceHolderImages } from '@/lib/placeholder-images';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { Badge } from '@/components/ui/badge';
import { trails } from '@/lib/data';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { ArrowUpRight } from 'lucide-react';

export default function MapPage() {
  const mapImage = PlaceHolderImages.find((p) => p.id === 'map');

  const trailMarkers = [
    { trail: trails[0], position: { top: '30%', left: '40%' } },
    { trail: trails[1], position: { top: '50%', left: '60%' } },
    { trail: trails[2], position: { top: '70%', left: '25%' } },
  ];

  return (
    <div className="flex flex-col h-[calc(100vh-10rem)]">
      <div className="mb-6">
        <h1 className="text-3xl font-bold tracking-tight">Interactive Route Map</h1>
        <p className="text-muted-foreground">
          Click on a marker to explore routes in the region.
        </p>
      </div>
      <Card className="flex-1 overflow-hidden">
        <div className="relative w-full h-full">
          {mapImage?.imageUrl && (
            <Image
              src={mapImage.imageUrl}
              alt={mapImage.description}
              fill
              className="object-cover"
              data-ai-hint={mapImage.imageHint}
            />
          )}

          {trailMarkers.map(({ trail, position }) => (
            <Popover key={trail.id}>
              <PopoverTrigger asChild>
                <button
                  className="absolute -translate-x-1/2 -translate-y-1/2"
                  style={position}
                  aria-label={`Show route: ${trail.name}`}
                >
                  <div className="w-4 h-4 rounded-full bg-accent ring-4 ring-accent/30 animate-pulse" />
                </button>
              </PopoverTrigger>
              <PopoverContent className="w-80">
                <div className="grid gap-4">
                  <div className="space-y-2">
                    <div className="flex justify-between items-start">
                      <h4 className="font-medium leading-none">{trail.name}</h4>
                      <Badge variant={trail.difficulty === 'Advanced' ? 'destructive' : trail.difficulty === 'Intermediate' ? 'secondary' : 'default'} className="bg-accent text-accent-foreground shrink-0">
                        {trail.difficulty}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {trail.location}
                    </p>
                  </div>
                  <div className="grid gap-2">
                    <p className="text-sm line-clamp-3">{trail.description}</p>
                    <div className="flex items-center text-sm text-muted-foreground justify-between">
                        <span>Length: {trail.length}</span>
                        <span>Elevation: {trail.elevation}</span>
                    </div>
                    <Button variant="ghost" size="sm" asChild className='justify-end'>
                        <Link href="#">
                            View Details <ArrowUpRight className="w-4 h-4 ml-1" />
                        </Link>
                    </Button>
                  </div>
                </div>
              </PopoverContent>
            </Popover>
          ))}
        </div>
      </Card>
    </div>
  );
}