"use client";

import { useState, useEffect } from 'react';
import { GeoData } from '../../api/types';

export default function GeoAnalyticsPage() {
  const [geoData, setGeoData] = useState<GeoData[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [dateRange, setDateRange] = useState({
    from: new Date('2024-02-01'),
    to: new Date('2025-03-05')
  });

  useEffect(() => {
    const fetchGeoData = async () => {
      try {
        setIsLoading(true);
        setError(null);

        const response = await fetch(`/api/events/geo?startTime=${dateRange.from.toISOString().split('T')[0]}T00:00:00Z&endTime=${dateRange.to.toISOString().split('T')[0]}T23:59:59Z`);
        if (!response.ok) throw new Error('Failed to fetch geographic data');
        
        const data = await response.json();
        setGeoData(data.data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'An error occurred');
      } finally {
        setIsLoading(false);
      }
    };

    fetchGeoData();
  }, [dateRange]);

  return (
    <div className="container mx-auto px-4 py-8">
      {/* 页面标题 */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-foreground">Geographic Analysis</h1>
        <p className="mt-2 text-foreground">Analyze visitor distribution by location</p>
      </div>

      {/* 时间范围选择器 */}
      <div className="bg-card-bg rounded-xl p-6 mb-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">Start Date</label>
            <input
              type="date"
              className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm text-foreground"
              value={dateRange.from.toISOString().split('T')[0]}
              onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">End Date</label>
            <input
              type="date"
              className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm text-foreground"
              value={dateRange.to.toISOString().split('T')[0]}
              onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))}
            />
          </div>
        </div>
      </div>

      {/* 地理数据表格 */}
      <div className="bg-card-bg rounded-xl shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-card-border">
            <thead>
              <tr className="bg-background/50">
                <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Location</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Visits</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Unique Visitors</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Percentage</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-card-border">
              {geoData.map(item => (
                <tr key={item.location} className="hover:bg-background/50">
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
                    {item.location}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
                    {item.visits}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
                    {item.visitors}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm">
                    <div className="flex items-center">
                      <span className="mr-2 text-foreground">{item.percentage.toFixed(1)}%</span>
                      <div className="w-24 bg-gray-200 rounded-full h-2">
                        <div
                          className="bg-blue-500 h-2 rounded-full"
                          style={{ width: `${item.percentage}%` }}
                        />
                      </div>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* 加载状态 */}
        {isLoading && (
          <div className="flex justify-center items-center p-8">
            <div className="w-8 h-8 border-t-2 border-b-2 border-accent-blue rounded-full animate-spin"></div>
          </div>
        )}

        {/* 错误状态 */}
        {error && (
          <div className="flex justify-center items-center p-8 text-accent-red">
            <p>{error}</p>
          </div>
        )}

        {/* 无数据状态 */}
        {!isLoading && !error && geoData.length === 0 && (
          <div className="flex justify-center items-center p-8 text-foreground">
            <p>No geographic data available</p>
          </div>
        )}
      </div>

      {/* 提示信息 */}
      <div className="mt-4 text-sm text-foreground">
        <p>Note: Geographic data is based on IP addresses and may not be 100% accurate.</p>
      </div>
    </div>
  );
}