'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import type { SystemStats } from '@/types/monitoring';
import { formatBytes, formatUptime, formatPercent, safeToFixed } from '@/hooks/use-monitoring';
import { Activity, Cpu, HardDrive, Server, Timer, Zap } from 'lucide-react';

interface StatsCardsProps {
  apiStats?: SystemStats;
  workerStats?: SystemStats;
}

interface ProcessCardProps {
  stats: SystemStats;
  title: string;
}

function ProcessCard({ stats, title }: ProcessCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <Badge variant="default" className="bg-green-500">Online</Badge>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1">
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <Cpu className="h-3 w-3" />
              CPU
            </div>
            <p className="text-lg font-semibold">{formatPercent(stats.cpu?.usage_percent)}</p>
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <Server className="h-3 w-3" />
              Go Heap
            </div>
            <p className="text-lg font-semibold">{formatBytes(stats.memory?.heap_alloc)}</p>
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <Activity className="h-3 w-3" />
              Goroutines
            </div>
            <p className="text-lg font-semibold">{stats.runtime?.goroutines ?? 0}</p>
          </div>
          <div className="space-y-1">
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <Timer className="h-3 w-3" />
              Uptime
            </div>
            <p className="text-lg font-semibold">{formatUptime(stats.runtime?.uptime_seconds)}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function OfflineCard({ title }: { title: string }) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <Badge variant="destructive">Offline</Badge>
      </CardHeader>
      <CardContent>
        <div className="text-center py-4 text-muted-foreground">
          No data available
        </div>
      </CardContent>
    </Card>
  );
}

export function StatsCards({ apiStats, workerStats }: StatsCardsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      {apiStats ? (
        <ProcessCard stats={apiStats} title="API Server" />
      ) : (
        <OfflineCard title="API Server" />
      )}
      {workerStats ? (
        <ProcessCard stats={workerStats} title="Worker" />
      ) : (
        <OfflineCard title="Worker" />
      )}
    </div>
  );
}

interface SystemOverviewProps {
  apiStats?: SystemStats;
  workerStats?: SystemStats;
}

export function SystemOverview({ apiStats, workerStats }: SystemOverviewProps) {
  const stats = apiStats || workerStats;
  if (!stats) return null;

  return (
    <div className="grid gap-4 md:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">System CPU</CardTitle>
          <Cpu className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatPercent(stats.cpu?.usage_percent)}</div>
          <p className="text-xs text-muted-foreground">
            Load: {safeToFixed(stats.cpu?.load_avg_1)} / {safeToFixed(stats.cpu?.load_avg_5)} / {safeToFixed(stats.cpu?.load_avg_15)}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">System Memory</CardTitle>
          <Server className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatPercent(stats.memory?.usage_percent)}</div>
          <p className="text-xs text-muted-foreground">
            {formatBytes(stats.memory?.used_bytes)} / {formatBytes(stats.memory?.total_bytes)}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Disk Usage</CardTitle>
          <HardDrive className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatPercent(stats.disk?.usage_percent)}</div>
          <p className="text-xs text-muted-foreground">
            {formatBytes(stats.disk?.used_bytes)} / {formatBytes(stats.disk?.total_bytes)}
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">GC Runs</CardTitle>
          <Zap className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{(apiStats?.runtime?.num_gc || 0) + (workerStats?.runtime?.num_gc || 0)}</div>
          <p className="text-xs text-muted-foreground">
            Last pause: {safeToFixed(((apiStats?.runtime?.last_gc_pause_ns || 0) + (workerStats?.runtime?.last_gc_pause_ns || 0)) / 1000000)}ms
          </p>
        </CardContent>
      </Card>
    </div>
  );
}
