import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Activity, CheckCircle2, AlertTriangle, XCircle } from "lucide-react"
import { schemas, ServiceStatus } from "@/api/schema.gen"

export function SystemTab() {
  const services = [
    { name: "API Gateway", status: schemas.ServiceStatus.enum.Ok, version: "0.1.0", uptime: "2d 4h" },
    { name: "Workflow Orchestrator", status: schemas.ServiceStatus.enum.Ok, version: "0.1.0", uptime: "2d 4h" },
    { name: "Data Persistence", status: schemas.ServiceStatus.enum.Ok, version: "0.1.0", uptime: "15d 2h" },
    { name: "Report Generator", status: schemas.ServiceStatus.enum.Degraded, version: "0.1.0", uptime: "1h 30m", issue: "High Latency" },
  ];

  return (
    <div className="grid gap-6 md:grid-cols-2">
        <Card className="md:col-span-2">
            <CardHeader>
                <CardTitle>服务状态概览</CardTitle>
                <CardDescription>微服务集群的实时健康监控。</CardDescription>
            </CardHeader>
            <CardContent>
                <div className="space-y-4">
                    {services.map(s => (
                        <div key={s.name} className="flex items-center justify-between p-4 border rounded-lg bg-card">
                            <div className="flex items-center gap-4">
                                <StatusIcon status={s.status} />
                                <div>
                                    <p className="font-medium">{s.name}</p>
                                    <p className="text-xs text-muted-foreground">v{s.version} • Uptime: {s.uptime}</p>
                                </div>
                            </div>
                            <div className="flex items-center gap-3">
                                {s.issue && <span className="text-xs text-yellow-600 font-medium">{s.issue}</span>}
                                <StatusBadge status={s.status} />
                            </div>
                        </div>
                    ))}
                </div>
            </CardContent>
        </Card>

        <Card>
            <CardHeader>
                <CardTitle>系统资源</CardTitle>
            </CardHeader>
            <CardContent>
                <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                        <span className="text-muted-foreground">Database Connections</span>
                        <span>12 / 50</span>
                    </div>
                    <div className="flex justify-between">
                        <span className="text-muted-foreground">Redis Memory</span>
                        <span>245 MB</span>
                    </div>
                    <div className="flex justify-between">
                        <span className="text-muted-foreground">NATS Messages/sec</span>
                        <span>45</span>
                    </div>
                </div>
            </CardContent>
        </Card>
    </div>
  )
}

function StatusIcon({ status }: { status: ServiceStatus }) {
    switch (status) {
        case schemas.ServiceStatus.enum.Ok: return <CheckCircle2 className="h-5 w-5 text-green-500" />;
        case schemas.ServiceStatus.enum.Degraded: return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
        case schemas.ServiceStatus.enum.Unhealthy: return <XCircle className="h-5 w-5 text-red-500" />;
        default: return <Activity className="h-5 w-5 text-muted-foreground" />;
    }
}

function StatusBadge({ status }: { status: ServiceStatus }) {
    switch (status) {
        case schemas.ServiceStatus.enum.Ok: return <Badge variant="default" className="bg-green-600 hover:bg-green-600">Healthy</Badge>;
        case schemas.ServiceStatus.enum.Degraded: return <Badge variant="secondary" className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">Degraded</Badge>;
        case schemas.ServiceStatus.enum.Unhealthy: return <Badge variant="destructive">Unhealthy</Badge>;
        default: return <Badge variant="outline">Unknown</Badge>;
    }
}
