import { useState, useMemo } from 'react';
import { useSeoMeta } from '@unhead/react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { RouteDialog } from '@/components/RouteDialog';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useSkateSpots } from '@/hooks/useSkateSpots';
import { useFoodSpots } from '@/hooks/useFoodSpots';
import {
  Utensils,
  MapPin,
  Phone,
  Globe,
  Clock,
  Navigation,
  Coffee,
  Beer,
  ChefHat,
} from 'lucide-react';
import type { FoodSpot } from '@/lib/types';
import { sanitizeUrl, sanitizeTel } from '@/lib/sanitizeUrl';
import { useTranslation } from '@/contexts/language';

const FOOD_TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  restaurant: ChefHat,
  cafe: Coffee,
  fast_food: Utensils,
  bar: Beer,
  pub: Beer,
  food_court: Utensils,
};

const FOOD_TYPE_KEYS: Record<string, string> = {
  restaurant: 'placesUi.food.restaurant',
  cafe: 'placesUi.food.cafe',
  fast_food: 'placesUi.food.fastFood',
  bar: 'placesUi.food.bar',
  pub: 'placesUi.food.pub',
  food_court: 'placesUi.food.foodCourt',
};

function FoodSpotCard({ spot }: { spot: FoodSpot }) {
  const { t } = useTranslation();
  const Icon = FOOD_TYPE_ICONS[spot.type] || Utensils;
  const [showRoute, setShowRoute] = useState(false);

  // In-app routing only — no external map handoff.
  const handleDirections = () => setShowRoute(true);

  return (
    <Card className="group hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 border-border/50 hover:border-primary/30">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
              <Icon className="h-5 w-5 text-primary" />
            </div>
            <div className="min-w-0">
              <CardTitle className="text-base line-clamp-1 group-hover:text-primary transition-colors">
                {spot.name}
              </CardTitle>
              <div className="flex items-center gap-2 mt-1">
                <Badge variant="secondary" className="text-xs">
                  {FOOD_TYPE_KEYS[spot.type] ? t(FOOD_TYPE_KEYS[spot.type]) : spot.type}
                </Badge>
                {spot.cuisine && (
                  <span className="text-xs text-muted-foreground truncate">
                    {spot.cuisine}
                  </span>
                )}
              </div>
            </div>
          </div>
          {spot.distance !== undefined && (
            <Badge variant="outline" className="flex-shrink-0">
              {spot.distance < 1
                ? `${Math.round(spot.distance * 1000)}m`
                : `${spot.distance.toFixed(1)}km`}
            </Badge>
          )}
        </div>
      </CardHeader>

      <CardContent className="space-y-3">
        {spot.address && (
          <div className="flex items-start gap-2 text-sm text-muted-foreground">
            <MapPin className="h-4 w-4 flex-shrink-0 mt-0.5" />
            <span className="line-clamp-2">{spot.address}</span>
          </div>
        )}

        {spot.openingHours && (
          <div className="flex items-start gap-2 text-sm text-muted-foreground">
            <Clock className="h-4 w-4 flex-shrink-0 mt-0.5" />
            <span className="line-clamp-1">{spot.openingHours}</span>
          </div>
        )}

        <div className="flex items-center gap-2 pt-2">
          {spot.phone && sanitizeTel(spot.phone) && (
            <a href={sanitizeTel(spot.phone)!}>
              <Button variant="outline" size="sm" className="gap-2">
                <Phone className="h-3 w-3" />
                {t('placesUi.food.call')}
              </Button>
            </a>
          )}
          {spot.website && sanitizeUrl(spot.website) && (
            <a href={sanitizeUrl(spot.website)!} target="_blank" rel="noopener noreferrer">
              <Button variant="outline" size="sm" className="gap-2">
                <Globe className="h-3 w-3" />
                {t('placesUi.food.website')}
              </Button>
            </a>
          )}
          <Button
            variant="default"
            size="sm"
            className="gap-2 ml-auto"
            onClick={handleDirections}
          >
            <Navigation className="h-3 w-3" />
            {t('placesUi.food.directions')}
          </Button>
        </div>
      </CardContent>
      <RouteDialog
        open={showRoute}
        onOpenChange={setShowRoute}
        destination={{ lat: spot.lat, lng: spot.lng }}
        destinationLabel={spot.name}
      />
    </Card>
  );
}

function FoodSpotSkeleton() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-start gap-3">
          <Skeleton className="w-10 h-10 rounded-xl" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-5 w-3/4" />
            <Skeleton className="h-4 w-1/3" />
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-3">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3" />
        <div className="flex gap-2 pt-2">
          <Skeleton className="h-8 w-16" />
          <Skeleton className="h-8 w-20" />
          <Skeleton className="h-8 w-24 ml-auto" />
        </div>
      </CardContent>
    </Card>
  );
}

export default function FoodPage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('seoUi.foodTitle'),
    description: t('seoUi.foodDesc'),
  });

  const { data: spots, isLoading: spotsLoading } = useSkateSpots(50);
  const [selectedSpotId, setSelectedSpotId] = useState<string | null>(null);

  const selectedSpot = useMemo(() => {
    if (!selectedSpotId || !spots) return null;
    return spots.find((s) => s.id === selectedSpotId) || null;
  }, [selectedSpotId, spots]);

  const {
    data: foodSpots,
    isLoading: foodLoading,
  } = useFoodSpots(selectedSpot?.geohash, 1);

  return (
    <>
      <div className="container px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold">{t('placesUi.food.title')}</h1>
          <p className="text-muted-foreground mt-1">
            {t('placesUi.food.subtitle')}
          </p>
        </div>

        {/* Spot selector */}
        <Card className="mb-8">
          <CardContent className="p-6">
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
              <div className="flex-1 w-full sm:w-auto">
                <label className="text-sm font-medium mb-2 block">
                  {t('placesUi.food.selectSpot')}
                </label>
                <Select
                  value={selectedSpotId || ''}
                  onValueChange={setSelectedSpotId}
                  disabled={spotsLoading}
                >
                  <SelectTrigger className="w-full sm:w-[300px]">
                    <SelectValue placeholder={t('placesUi.food.chooseSpot')} />
                  </SelectTrigger>
                  <SelectContent>
                    {spots?.map((spot) => (
                      <SelectItem key={spot.id} value={spot.id}>
                        <div className="flex items-center gap-2">
                          <MapPin className="h-4 w-4 text-muted-foreground" />
                          <span>{spot.title}</span>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {selectedSpot && (
                <div className="text-sm text-muted-foreground">
                  <span className="font-medium">{t('placesUi.food.locationLabel')}</span>{' '}
                  {selectedSpot.location || t('placesUi.food.unknown')}
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Food results */}
        {!selectedSpotId ? (
          <Card className="border-dashed">
            <CardContent className="py-16 text-center">
              <Utensils className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
              <h3 className="text-lg font-medium mb-2">{t('placesUi.food.selectSpotTitle')}</h3>
              <p className="text-muted-foreground max-w-md mx-auto">
                {t('placesUi.food.selectSpotDesc')}
              </p>
            </CardContent>
          </Card>
        ) : foodLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <FoodSpotSkeleton key={i} />
            ))}
          </div>
        ) : foodSpots && foodSpots.length > 0 ? (
          <>
            <div className="flex items-center justify-between mb-6">
              <p className="text-sm text-muted-foreground">
                {t('placesUi.food.placesFound', { count: foodSpots.length, spot: selectedSpot?.title ?? '' })}
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
              {foodSpots.map((spot) => (
                <FoodSpotCard key={spot.id} spot={spot} />
              ))}
            </div>
          </>
        ) : (
          <Card className="border-dashed">
            <CardContent className="py-16 text-center">
              <Utensils className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
              <h3 className="text-lg font-medium mb-2">{t('placesUi.food.noneFound')}</h3>
              <p className="text-muted-foreground max-w-md mx-auto">
                {t('placesUi.food.noneFoundDesc')}
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </>
  );
}