interface PlatformData {
  ios: number;
  android: number;
}

interface PlatformDonutProps {
  data?: PlatformData;
  loading?: boolean;
}

const DEFAULT_DATA: PlatformData = { ios: 45, android: 55 };

export default function PlatformDonut({ data = DEFAULT_DATA, loading }: PlatformDonutProps) {
  const { ios, android } = data;

  return (
    <div className="lg:col-span-1 bg-white rounded-xl shadow-sm border border-gray-200 p-6 flex flex-col relative">
      {loading && (
        <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/70 rounded-xl">
          <svg className="size-7 animate-spin text-primary" viewBox="0 0 24 24" fill="none">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
        </div>
      )}
      <h2 className="text-base font-bold text-[#0f172a] mb-6">플랫폼 비율</h2>

      {/* 도넛 차트 */}
      <div className="flex-1 flex flex-col items-center justify-center relative">
        <div className="relative size-48">
          <svg className="size-full" viewBox="0 0 36 36">
            {/* 배경 원 */}
            <path
              className="text-gray-100"
              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
              fill="none"
              stroke="currentColor"
              strokeWidth="3"
            />
            {/* Android (teal) */}
            <path
              className="text-teal-400"
              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
              fill="none"
              stroke="currentColor"
              strokeDasharray={`${android}, 100`}
              strokeWidth="3"
            />
            {/* iOS (primary blue) */}
            <path
              className="text-primary"
              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
              fill="none"
              stroke="currentColor"
              strokeDasharray={`${ios}, 100`}
              strokeDashoffset={`${-android}`}
              strokeWidth="3"
            />
          </svg>
          {/* 중앙 텍스트 */}
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-3xl font-bold text-gray-900">Total</span>
            <span className="text-sm text-gray-500">Devices</span>
          </div>
        </div>
      </div>

      {/* 범례 */}
      <div className="mt-8 flex flex-col gap-3 w-full px-4">
        <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50">
          <div className="flex items-center gap-2">
            <span className="size-3 rounded-full bg-primary flex-shrink-0" />
            <span className="text-sm font-medium text-gray-600">iOS</span>
          </div>
          <span className="text-lg font-bold text-gray-900">{ios}%</span>
        </div>
        <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50">
          <div className="flex items-center gap-2">
            <span className="size-3 rounded-full bg-teal-400 flex-shrink-0" />
            <span className="text-sm font-medium text-gray-600">Android</span>
          </div>
          <span className="text-lg font-bold text-gray-900">{android}%</span>
        </div>
      </div>
    </div>
  );
}