"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { createClient } from '@/lib/supabase/client';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';
import { toast } from '@/components/ui/use-toast';
import Image from 'next/image';

// Define the City interface with stats
interface City {
  id: number;
  name: string;
  country: string;
  minLat: number;
  maxLat: number;
  minLng: number;
  maxLng: number;
  pictureUrl?: string;
  totalgames: number;
  maxscore: number;
  besttime: number;
}

// Helper function to format seconds to HH:MM:SS
function formatTime(seconds: number): string {
  if (!seconds) return '-';
  
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;
  
  const parts = [];
  if (hours > 0) parts.push(`${hours}h`);
  if (minutes > 0 || hours > 0) parts.push(`${minutes}m`);
  parts.push(`${remainingSeconds}s`);
  
  return parts.join(' ');
}

// Function to determine difficulty level
function getDifficultyLevel(city: City): string {
  // This is a placeholder logic - you can customize based on actual difficulty criteria
  if (city.maxscore > 7500) return 'EASY';
  if (city.maxscore > 5000) return 'MODERATE';
  return 'HARD';
}

export default function CitiesPage() {
  const router = useRouter();
  const supabase = createClient();
  const [cities, setCities] = useState<City[]>([]);
  const [loading, setLoading] = useState(true);

  // Fetch cities with user stats
  useEffect(() => {
    async function fetchCitiesWithStats() {
      try {
        const { data: { session } } = await supabase.auth.getSession();
        if (!session) {
          console.error('No session found');
          router.push('/login');
          return;
        }

        const { data, error } = await supabase.rpc(
          'get_user_city_stats',
          { p_user_id: session.user.id }
        );
        
        if (error) throw error;
        
        console.log("Cities with stats:", data);
        setCities(data);
      } catch (error) {
        console.error('Error fetching cities with stats:', error);
        toast({
          title: 'Error',
          description: 'Failed to load cities. Please try again.',
          variant: 'destructive',
        });
      } finally {
        setLoading(false);
      }
    }

    fetchCitiesWithStats();
  }, [supabase, router]);

  // Function to start a game with the selected city
  async function handleStartGame(city: City) {
    try {
      setLoading(true);
      
      const { data: { session } } = await supabase.auth.getSession();
      if (!session) throw new Error("No session found");

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/start-game`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${session.access_token}`,
          },
          body: JSON.stringify({
            cityId: city.id
          })
        }
      );

      const responseData = await response.json();

      if (!response.ok) {
        throw new Error(responseData.error || "Failed to start game");
      }

      if (!responseData.game) {
        throw new Error("No game data received");
      }

      toast({
        title: `Adventure in ${city.name}`,
        description: "Your journey begins...",
      });

      router.push(`/game-new/${responseData.game.id}`);
    } catch (error) {
      console.error("Error starting game:", error);
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "Failed to start game",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex flex-col min-h-screen">
      {/* Header */}
      {/* <div className="bg-white p-4 shadow-sm z-10 flex items-center">
        <Button 
          variant="ghost" 
          size="icon" 
          onClick={() => router.push('/')}
          className="mr-2"
        >
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="text-xl font-semibold">Choose a City</h1>
      </div> */}

      {/* Cities Grid */}
      <div className="flex-1 p-4">
        {loading ? (
          <div className="flex justify-center items-center h-full">
            <div className="flex flex-col items-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
              <p className="mt-2 text-sm text-gray-600">Loading cities...</p>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {cities.map((city) => (
              <div 
                key={city.id} 
                className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer hover:scale-[1.03]"
                onClick={() => handleStartGame(city)}
              >
                {/* City Image */}
                <div className="relative h-48">
                  <div className="absolute inset-0">
                    {city.pictureUrl && (
                      <Image 
                        src={city.pictureUrl} 
                        alt={city.name}
                        fill
                        className="object-cover"
                      />
                    )}
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"></div>
                  <div className="absolute bottom-0 left-0 p-4 text-white">
                    <h2 className="text-xl font-bold">{city.name}</h2>
                    <p className="text-sm opacity-90">{city.country}</p>
                  </div>

                </div>
                
                {/* Stats Bar */}
                <div className="p-3">
                  <div className="grid grid-cols-3 w-full text-center">
                    {/* Games Played */}
                    <div className="flex flex-col items-center">
                      <span className="text-xs text-gray-500">Games</span>
                      <span className="text-sm font-semibold">{city.totalgames || 0}</span>
                    </div>
                    
                    {/* Best Time */}
                    <div className="flex flex-col items-center">
                      <span className="text-xs text-gray-500">Best Time</span>
                      <span className="text-sm font-semibold">{formatTime(city.besttime)}</span>
                    </div>
                    
                    {/* High Score */}
                    <div className="flex flex-col items-center">
                      <span className="text-xs text-gray-500">High Score</span>
                      <span className="text-sm font-semibold">{city.maxscore || 0}</span>
                    </div>
                  </div>
                </div>
                
                {/* Progress Bar */}
                <div className="px-3 pb-3">
                  <div className="w-full h-2 bg-slate-200 rounded-full overflow-hidden">
                    <div 
                      className="h-full bg-gradient-to-r from-purple-500 via-blue-500 to-teal-400"
                      style={{ width: `${Math.min(100, (city.maxscore / 10000) * 100)}%` }}
                    ></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}