import { Activity, Moon, Sun } from "lucide-react"

import { useSystemStatus } from "@/features/system/api/system.query"
import { useUiStore } from "@/shared/config/ui-store"
import { Badge } from "@/shared/ui/badge"
import { Button } from "@/shared/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/shared/ui/card"

export function SystemStatusPage() {
  const status = useSystemStatus()
  const theme = useUiStore((state) => state.theme)
  const toggleTheme = useUiStore((state) => state.toggleTheme)

  const statusLabel = status.isPending
    ? "正在连接"
    : status.isError
      ? "连接异常"
      : "运行正常"

  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-6 text-foreground">
      <Card className="w-full max-w-xl">
        <CardHeader className="flex-row items-start justify-between gap-4">
          <div className="space-y-1.5">
            <CardTitle className="flex items-center gap-2 text-2xl">
              <Activity className="size-6 text-primary" aria-hidden="true" />
              Zhixing System
            </CardTitle>
            <CardDescription>
              量化系统开发环境已完成最小链路连接。
            </CardDescription>
          </div>
          <Button
            aria-label="切换主题"
            onClick={toggleTheme}
            size="icon"
            variant="outline"
          >
            {theme === "dark" ? (
              <Sun aria-hidden="true" />
            ) : (
              <Moon aria-hidden="true" />
            )}
          </Button>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between rounded-md border bg-muted/40 p-4">
            <div>
              <p className="font-medium">后端服务</p>
              <p className="text-sm text-muted-foreground">
                {status.data?.service ?? "Zhixing Server"}
              </p>
            </div>
            <Badge variant={status.isError ? "destructive" : "default"}>
              {statusLabel}
            </Badge>
          </div>
          {status.data ? (
            <p className="text-sm text-muted-foreground">
              当前环境：
              <span className="font-medium text-foreground">
                {status.data.environment}
              </span>
            </p>
          ) : null}
        </CardContent>
      </Card>
    </main>
  )
}