awoooi/apps/web/src/components/errors/error-overview-card.tsx

'use client'

/**
 * ErrorOverviewCard - #41 錯誤統計卡片
 * =====================================
 * Phase 10: Sentry + OpenClaw + UI 整合
 *
 * Nothing.tech 視覺規範:
 * - 純白底色 (bg-white)
 * - 極細淺灰邊框 (border border-gray-200)
 * - 無圓角或微圓角 (rounded-sm)
 * - 嚴禁陰影 (shadow-none)
 *
 * 建立: 2026-03-26 (台北時區)
 * 建立者: Claude Code (#41 Error UI)
 */

import { useTranslations } from 'next-intl'
import { cn } from '@/lib/utils'
import { AlertTriangle, Bug, Clock, TrendingUp, TrendingDown, Minus } from 'lucide-react'
import type { ErrorStatsResponse } from '@/lib/api-client'

// =============================================================================
// Component Props
// =============================================================================

interface ErrorOverviewCardProps {
  stats: ErrorStatsResponse | null
  loading?: boolean
  error?: string | null
  changePercent?: number
  className?: string
}

// =============================================================================
// Component
// =============================================================================

export function ErrorOverviewCard({
  stats,
  loading = false,
  error = null,
  changePercent = 0,
  className,
}: ErrorOverviewCardProps) {
  const t = useTranslations('errors')

  // Loading state
  if (loading) {
    return (
      <div className={cn(
        'bg-white border border-gray-200 rounded-sm p-4',
        className
      )}>
        <div className="animate-pulse space-y-3">
          <div className="h-4 bg-gray-200 rounded w-1/3" />
          <div className="grid grid-cols-2 gap-4">
            <div className="h-12 bg-gray-100 rounded" />
            <div className="h-12 bg-gray-100 rounded" />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="h-12 bg-gray-100 rounded" />
            <div className="h-12 bg-gray-100 rounded" />
          </div>
        </div>
      </div>
    )
  }

  // Error state
  if (error) {
    return (
      <div className={cn(
        'bg-white border border-red-200 rounded-sm p-4',
        className
      )}>
        <div className="flex items-center gap-2 text-red-600">
          <AlertTriangle className="h-4 w-4" />
          <span className="text-sm">{error}</span>
        </div>
      </div>
    )
  }

  // Empty state
  if (!stats) {
    return (
      <div className={cn(
        'bg-white border border-gray-200 rounded-sm p-4',
        className
      )}>
        <div className="text-center text-gray-500 py-4">
          <Bug className="h-8 w-8 mx-auto mb-2 opacity-50" />
          <p className="text-sm">{t('noData')}</p>
        </div>
      </div>
    )
  }

  // Trend indicator
  const TrendIcon = changePercent > 0 ? TrendingUp : changePercent < 0 ? TrendingDown : Minus
  const trendColor = changePercent > 0 ? 'text-red-500' : changePercent < 0 ? 'text-green-500' : 'text-gray-400'

  return (
    <div className={cn(
      'bg-white border border-gray-200 rounded-sm p-4',
      className
    )}>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Bug className="h-4 w-4 text-gray-600" />
          <h3 className="text-sm font-medium text-gray-900">{t('overview')}</h3>
        </div>
        {changePercent !== 0 && (
          <div className={cn('flex items-center gap-1 text-xs', trendColor)}>
            <TrendIcon className="h-3 w-3" />
            <span>{Math.abs(changePercent).toFixed(1)}%</span>
          </div>
        )}
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-2 gap-3">
        {/* Unresolved Issues */}
        <div className="bg-red-50 border border-red-100 rounded-sm p-3">
          <div className="text-2xl font-semibold text-red-700">
            {stats.unresolved_issues}
          </div>
          <div className="text-xs text-red-600 mt-1">
            {t('unresolvedIssues')}
          </div>
        </div>

        {/* 24h Errors */}
        <div className="bg-orange-50 border border-orange-100 rounded-sm p-3">
          <div className="flex items-center gap-1">
            <Clock className="h-3 w-3 text-orange-500" />
            <span className="text-2xl font-semibold text-orange-700">
              {stats.error_count_24h}
            </span>
          </div>
          <div className="text-xs text-orange-600 mt-1">
            {t('errors24h')}
          </div>
        </div>

        {/* Critical Count */}
        <div className="bg-purple-50 border border-purple-100 rounded-sm p-3">
          <div className="flex items-center gap-1">
            <AlertTriangle className="h-3 w-3 text-purple-500" />
            <span className="text-2xl font-semibold text-purple-700">
              {stats.critical_count}
            </span>
          </div>
          <div className="text-xs text-purple-600 mt-1">
            {t('criticalErrors')}
          </div>
        </div>

        {/* Total Issues */}
        <div className="bg-gray-50 border border-gray-100 rounded-sm p-3">
          <div className="text-2xl font-semibold text-gray-700">
            {stats.total_issues}
          </div>
          <div className="text-xs text-gray-600 mt-1">
            {t('totalIssues')}
          </div>
        </div>
      </div>

      {/* Projects */}
      {stats.projects.length > 0 && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <div className="text-xs text-gray-500">
            {t('projects')}: {stats.projects.join(', ')}
          </div>
        </div>
      )}
    </div>
  )
}