/**
 * Overview Tab
 * Displays system statistics, health status, and key metrics
 */
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useQuery } from "@tanstack/react-query";
import { useVisibilityAwareRefetchInterval } from "@/hooks/useVisibilityAwareRefetchInterval";
import { POLL_INTERVALS } from "@/shared/config/polling";
import { apiClient } from "@/shared/api/client";
import { Activity, Users, Database, Cpu, CheckCircle2, AlertCircle, Clock } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { formatIsoToDdMmYyyyHhMmSs } from "@/lib/vnDateFormat";

interface HealthStatus {
  status: string;
  timestamp: string;
  active_workflows: number;
  ollama: {
    status: string;
    available_models: string[];
  };
}

export function OverviewTab() {
  const healthPoll = useVisibilityAwareRefetchInterval(POLL_INTERVALS.adminOverviewHealth);
  const { data: health, isLoading, error } = useQuery<HealthStatus>({
    queryKey: ['admin', 'health'],
    queryFn: async () => {
      return apiClient.get('/health');
    },
    staleTime: 30_000,
    refetchInterval: healthPoll,
    refetchOnWindowFocus: true,
  });

  const stats = [
    {
      title: "Trạng thái Hệ thống",
      value: health?.status === "healthy" ? "Hoạt động" : "Lỗi",
      icon: Activity,
      status: health?.status === "healthy" ? "success" : "error",
      description: health?.status === "healthy" ? "Tất cả dịch vụ đang hoạt động bình thường" : "Có vấn đề với hệ thống",
    },
    {
      title: "Workflows Đang hoạt động",
      value: health?.active_workflows ?? 0,
      icon: Database,
      status: "info",
      description: "Số lượng workflow đang được xử lý",
    },
    {
      title: "Mô hình AI",
      value: health?.ollama?.available_models?.length ?? 0,
      icon: Cpu,
      status: health?.ollama?.status === "connected" ? "success" : "error",
      description: health?.ollama?.status === "connected" 
        ? `${health.ollama.available_models?.join(", ") || "Không có"}`
        : "Ollama không kết nối được",
    },
  ];

  return (
    <div className="space-y-6">
      {/* System Status */}
      <div className="grid gap-4 md:grid-cols-3">
        {stats.map((stat, index) => (
          <Card key={index}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <Skeleton className="h-8 w-20" />
              ) : error ? (
                <div className="text-sm text-destructive">Lỗi tải dữ liệu</div>
              ) : (
                <>
                  <div className="text-2xl font-bold">{stat.value}</div>
                  <div className="flex items-center gap-2 mt-2">
                    <Badge 
                      variant={stat.status === "success" ? "default" : stat.status === "error" ? "destructive" : "secondary"}
                      className="text-xs"
                    >
                      {stat.status === "success" ? (
                        <><CheckCircle2 className="h-3 w-3 mr-1" /> Hoạt động</>
                      ) : stat.status === "error" ? (
                        <><AlertCircle className="h-3 w-3 mr-1" /> Lỗi</>
                      ) : (
                        <><Clock className="h-3 w-3 mr-1" /> Thông tin</>
                      )}
                    </Badge>
                  </div>
                  <p className="text-xs text-muted-foreground mt-2">{stat.description}</p>
                </>
              )}
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Ollama Models Detail */}
      {health?.ollama && (
        <Card>
          <CardHeader>
            <CardTitle>Mô hình AI có sẵn</CardTitle>
            <CardDescription>
              Danh sách các mô hình Ollama đã được tải và sẵn sàng sử dụng
            </CardDescription>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="space-y-2">
                <Skeleton className="h-8 w-full" />
                <Skeleton className="h-8 w-full" />
              </div>
            ) : health.ollama.available_models && health.ollama.available_models.length > 0 ? (
              <div className="flex flex-wrap gap-2">
                {health.ollama.available_models.map((model, index) => (
                  <Badge key={index} variant="outline" className="text-sm">
                    {model}
                  </Badge>
                ))}
              </div>
            ) : (
              <p className="text-sm text-muted-foreground">Không có mô hình nào được tải</p>
            )}
          </CardContent>
        </Card>
      )}

      {/* System Information */}
      <Card>
        <CardHeader>
          <CardTitle>Thông tin Hệ thống</CardTitle>
          <CardDescription>Thông tin chi tiết về trạng thái hệ thống</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="space-y-2">
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-full" />
            </div>
          ) : health ? (
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Thời gian cập nhật:</span>
                <span>{formatIsoToDdMmYyyyHhMmSs(health.timestamp)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Trạng thái Ollama:</span>
                <Badge variant={health.ollama.status === "connected" ? "default" : "destructive"}>
                  {health.ollama.status === "connected" ? "Đã kết nối" : "Không kết nối"}
                </Badge>
              </div>
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">Không có dữ liệu</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
