"use client";

import { DeviceAnalytics as DeviceAnalyticsType } from '../../api/types';

interface DeviceAnalyticsProps {
  data: DeviceAnalyticsType;
}

function StatCard({ title, items }: { title: string; items: { name: string; count: number; percentage: number }[] }) {
  // 安全地格式化数字
  const formatNumber = (value: number | string | undefined | null): string => {
    if (value === undefined || value === null) return '0';
    return typeof value === 'number' ? value.toLocaleString() : String(value);
  };

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

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{title}</h3>
      <div className="space-y-4">
        {items.map((item, index) => (
          <div key={index}>
            <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
              <span>{item.name || 'Unknown'}</span>
              <span>{formatNumber(item.count)} ({formatPercent(item.percentage)}%)</span>
            </div>
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
              <div
                className="bg-blue-500 h-2 rounded-full"
                style={{ width: `${item.percentage || 0}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function DeviceAnalytics({ data }: DeviceAnalyticsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <StatCard
        title="Device Types"
        items={(data.deviceTypes || []).map(item => ({
          name: item.type ? (item.type.charAt(0).toUpperCase() + item.type.slice(1)) : 'Unknown',
          count: item.count,
          percentage: item.percentage
        }))}
      />
      <StatCard
        title="Browsers"
        items={data.browsers || []}
      />
      <StatCard
        title="Operating Systems"
        items={data.operatingSystems || []}
      />
    </div>
  );
}