'use client'

import { StatCard } from './StatCard'
import { formatNumber, formatDuration, type UsageStats } from './types'

export function UsageTab({ usageStats }: { usageStats: UsageStats }) {
  return (
    <div>
      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <StatCard label="Requests gesamt" value={formatNumber(usageStats.total_requests)} />
        <StatCard label="Tokens gesamt" value={formatNumber(usageStats.total_tokens)} />
        <StatCard label="Avg. Dauer" value={formatDuration(usageStats.avg_duration_ms)} />
        <StatCard
          label="PII-Rate"
          value={`${(usageStats.pii_detection_rate * 100).toFixed(1)}%`}
          highlight={usageStats.pii_detection_rate > 0.1}
        />
      </div>

      {/* Token Breakdown */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-900 mb-4">Model-Nutzung</h3>
          {Object.entries(usageStats.models_used || {}).length === 0 ? (
            <p className="text-gray-400 text-sm">Keine Daten</p>
          ) : (
            <div className="space-y-3">
              {Object.entries(usageStats.models_used).sort((a, b) => b[1] - a[1]).map(([model, count]) => (
                <div key={model} className="flex items-center justify-between">
                  <span className="text-sm text-gray-700">{model}</span>
                  <div className="flex items-center gap-3">
                    <div className="w-32 h-2 bg-gray-100 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-purple-500 rounded-full"
                        style={{ width: `${(count / usageStats.total_requests) * 100}%` }}
                      />
                    </div>
                    <span className="text-sm font-mono text-gray-500 w-16 text-right">{formatNumber(count)}</span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="bg-white rounded-xl border border-gray-200 p-5">
          <h3 className="font-semibold text-gray-900 mb-4">Provider-Verteilung</h3>
          {Object.entries(usageStats.providers_used || {}).length === 0 ? (
            <p className="text-gray-400 text-sm">Keine Daten</p>
          ) : (
            <div className="space-y-3">
              {Object.entries(usageStats.providers_used).sort((a, b) => b[1] - a[1]).map(([provider, count]) => (
                <div key={provider} className="flex items-center justify-between">
                  <span className="text-sm text-gray-700 capitalize">{provider}</span>
                  <span className="text-sm font-mono text-gray-500">{formatNumber(count)}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Token Details */}
      <div className="mt-6 bg-white rounded-xl border border-gray-200 p-5">
        <h3 className="font-semibold text-gray-900 mb-4">Token-Aufschluesselung</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="text-center">
            <div className="text-2xl font-bold text-gray-900">{formatNumber(usageStats.total_prompt_tokens)}</div>
            <div className="text-sm text-gray-500">Prompt Tokens</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-gray-900">{formatNumber(usageStats.total_completion_tokens)}</div>
            <div className="text-sm text-gray-500">Completion Tokens</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-purple-600">{formatNumber(usageStats.total_tokens)}</div>
            <div className="text-sm text-gray-500">Gesamt</div>
          </div>
        </div>
      </div>
    </div>
  )
}