"use client";

import { useState, useEffect } from 'react';
import { getLocationFromIP } from '@/app/utils/ipLocation';

interface LocationData {
  ip: string;
  country_name: string;
  country_code: string;
  city: string;
  region: string;
  continent_code: string;
  continent_name: string;
  latitude: number;
  longitude: number;
}

export default function IpLocationTest() {
  const [locationData, setLocationData] = useState<LocationData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  const testIp = "120.244.39.90";
  
  useEffect(() => {
    async function fetchLocation() {
      try {
        setLoading(true);
        setError(null);
        
        const data = await getLocationFromIP(testIp);
        setLocationData(data);
        
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error occurred');
      } finally {
        setLoading(false);
      }
    }
    
    fetchLocation();
  }, []);
  
  return (
    <div className="p-4 bg-white rounded-lg shadow">
      <h2 className="text-lg font-semibold mb-4">IP Location Test: {testIp}</h2>
      
      {loading && (
        <div className="flex items-center text-gray-500">
          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500 mr-2"></div>
          Loading location data...
        </div>
      )}
      
      {error && (
        <div className="text-red-500">
          Error: {error}
        </div>
      )}
      
      {!loading && locationData && (
        <div className="space-y-4">
          <div>
            <h3 className="font-medium">Location Data:</h3>
            <pre className="mt-2 p-4 bg-gray-100 rounded overflow-auto">
              {JSON.stringify(locationData, null, 2)}
            </pre>
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div className="border p-3 rounded">
              <h4 className="font-medium">Country</h4>
              <div>{locationData.country_name} ({locationData.country_code})</div>
            </div>
            
            <div className="border p-3 rounded">
              <h4 className="font-medium">City</h4>
              <div>{locationData.city || 'N/A'}</div>
            </div>
            
            <div className="border p-3 rounded">
              <h4 className="font-medium">Region</h4>
              <div>{locationData.region || 'N/A'}</div>
            </div>
            
            <div className="border p-3 rounded">
              <h4 className="font-medium">Continent</h4>
              <div>{locationData.continent_name} ({locationData.continent_code})</div>
            </div>
            
            <div className="border p-3 rounded col-span-2">
              <h4 className="font-medium">Coordinates</h4>
              <div>Latitude: {locationData.latitude}, Longitude: {locationData.longitude}</div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}