shorturl-analytics/app/components/analytics/GeoAnalytics.tsx

"use client";

import { useState } from 'react';
import { GeoData } from '@/app/api/types';

interface GeoAnalyticsProps {
  data: GeoData[];
}

export default function GeoAnalytics({ data }: GeoAnalyticsProps) {
  const [viewMode, setViewMode] = useState<'country' | 'city' | 'region' | 'continent'>('country');

  // 安全地格式化数字
  const formatNumber = (value: number | undefined | null): string => {
    if (value === undefined || value === null) return '0';
    return value.toLocaleString();
  };

  // 安全地格式化百分比
  const formatPercent = (value: number | undefined | null): string => {
    if (value === undefined || value === null) return '0';
    return value.toFixed(1);
  };

  const sortedData = [...data].sort((a, b) => (b.visits || 0) - (a.visits || 0));

  // Handle tab selection - only change local view mode
  const handleViewModeChange = (mode: 'country' | 'city' | 'region' | 'continent') => {
    setViewMode(mode);
    // Only change the local view mode, no callback to parent
  };

  return (
    <div>
      {/* Tabs for geographic levels */}
      <div className="flex border-b mb-6">
        <button 
          onClick={() => handleViewModeChange('country')}
          className={`px-4 py-2 ${viewMode === 'country' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
        >
          Countries
        </button>
        <button 
          onClick={() => handleViewModeChange('city')}
          className={`px-4 py-2 ${viewMode === 'city' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
        >
          Cities
        </button>
        <button 
          onClick={() => handleViewModeChange('region')}
          className={`px-4 py-2 ${viewMode === 'region' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
        >
          Regions
        </button>
        <button 
          onClick={() => handleViewModeChange('continent')}
          className={`px-4 py-2 ${viewMode === 'continent' ? 'border-b-2 border-blue-500 text-blue-600' : 'text-gray-500'}`}
        >
          Continents
        </button>
      </div>

      {/* Table with added area column */}
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {viewMode === 'country' ? 'Country' : 
                 viewMode === 'city' ? 'City' : 
                 viewMode === 'region' ? 'Region' : 'Continent'}
              </th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                {viewMode === 'country' ? 'Countries' : 
                 viewMode === 'city' ? 'Cities' : 
                 viewMode === 'region' ? 'Regions' : 'Continents'}
              </th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Visits
              </th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Unique Visitors
              </th>
              <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                % of Total
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {sortedData.length > 0 ? (
              sortedData.map((item, index) => (
                <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {item.location || 'Unknown'}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {item.area || ''}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {formatNumber(item.visits)}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    {formatNumber(item.visitors)}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    <div className="flex items-center">
                      <div className="w-24 bg-gray-200 rounded-full h-2">
                        <div
                          className="bg-blue-600 h-2 rounded-full"
                          style={{ width: `${item.percentage || 0}%` }}
                        />
                      </div>
                      <span className="ml-2">{formatPercent(item.percentage)}%</span>
                    </div>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={5} className="px-6 py-4 text-center text-sm text-gray-500">
                  No location data available
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}