import { Activity, AlertTriangle, CakeSlice, Candy, Info, MoonStar, Sparkles } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";

import { platformApiClient } from "../api/client";
import type {
  AiProviderResponse,
  AuditEventResponse,
  JobResponse,
  PlatformResourceUsageResponse,
  RunEndpointResponse,
  ServerInstanceResponse,
  ServerMetricsResponse
} from "../api/types";
import { UsageMeter } from "../components/OperationControls";
import { EmptyState, ErrorState, LoadingState } from "../components/StateViews";
import type { PageComponentProps } from "../contracts/page";
import type { GameTypeDistributionEntry, PlatformOverviewSignal } from "../contracts/workspace";
import { serverIsOnline } from "../contracts/workspace";
import { cx } from "../utils/classes";

type ModuleState<T> = { status: "loading" } | { status: "error"; reason: string } | { status: "ready"; data: T };

interface OverviewData {
  instances: ServerInstanceResponse[];
  endpoints: RunEndpointResponse[];
  jobs: JobResponse[];
}

export function HomePage({ onNavigate }: PageComponentProps) {
  const [core, setCore] = useState<ModuleState<OverviewData>>({ status: "loading" });
  const [metrics, setMetrics] = useState<ModuleState<ServerMetricsResponse[]>>({ status: "loading" });
  const [usage, setUsage] = useState<ModuleState<PlatformResourceUsageResponse>>({ status: "loading" });
  const [providers, setProviders] = useState<ModuleState<AiProviderResponse[]>>({ status: "loading" });
  const [signals, setSignals] = useState<ModuleState<AuditEventResponse[]>>({ status: "loading" });

  const refreshCore = useCallback(async () => {
    setCore({ status: "loading" });
    try {
      const [instances, endpoints, jobs] = await Promise.all([
        platformApiClient.listServerInstances(),
        platformApiClient.listRunEndpoints(),
        platformApiClient.listJobs()
      ]);
      setCore({ status: "ready", data: { instances: instances.items, endpoints: endpoints.items, jobs: jobs.items } });
    } catch (error) {
      setCore({ status: "error", reason: error instanceof Error ? error.message : "加载失败" });
    }
  }, []);

  const refreshMetrics = useCallback(async () => {
    setMetrics({ status: "loading" });
    try {
      const response = await platformApiClient.listServerMetrics();
      setMetrics({ status: "ready", data: response.items });
    } catch {
      setMetrics({ status: "ready", data: [] });
    }
  }, []);

  const refreshUsage = useCallback(async () => {
    setUsage({ status: "loading" });
    try {
      const response = await platformApiClient.getPlatformResourceUsage();
      setUsage({ status: "ready", data: response });
    } catch {
      setUsage({ status: "error", reason: "平台资源指标接口尚未提供" });
    }
  }, []);

  const refreshProviders = useCallback(async () => {
    setProviders({ status: "loading" });
    try {
      const response = await platformApiClient.listAiProviders();
      setProviders({ status: "ready", data: response.items });
    } catch (error) {
      setProviders({ status: "error", reason: error instanceof Error ? error.message : "加载失败" });
    }
  }, []);

  const refreshSignals = useCallback(async () => {
    setSignals({ status: "loading" });
    try {
      const response = await platformApiClient.listAuditEvents();
      setSignals({ status: "ready", data: response.items });
    } catch {
      setSignals({ status: "ready", data: [] });
    }
  }, []);

  useEffect(() => {
    void refreshCore();
    void refreshMetrics();
    void refreshUsage();
    void refreshProviders();
    void refreshSignals();
  }, [refreshCore, refreshMetrics, refreshUsage, refreshProviders, refreshSignals]);

  const distribution = useMemo<GameTypeDistributionEntry[]>(() => {
    if (core.status !== "ready") {
      return [];
    }
    const counts = new Map<string, number>();
    for (const instance of core.data.instances) {
      counts.set(instance.pluginId, (counts.get(instance.pluginId) ?? 0) + 1);
    }
    return [...counts.entries()].map(([serverType, count]) => ({ serverType, label: serverType, count }));
  }, [core]);

  const overviewSignals = useMemo<PlatformOverviewSignal[]>(() => {
    const collected: PlatformOverviewSignal[] = [];
    if (core.status === "ready") {
      for (const instance of core.data.instances.filter((item) => item.state === "failed")) {
        collected.push({
          id: `fault-${instance.id}`,
          kind: "fault",
          summary: `服务器 ${instance.name} 处于异常状态`,
          detail: `实例 ${instance.id} 状态为 failed，需要排查`,
          targetPage: "servers",
          targetId: instance.id,
          tone: "error",
          at: instance.updatedAt
        });
      }
      for (const job of core.data.jobs.filter((item) => item.state === "failed").slice(0, 5)) {
        collected.push({
          id: `job-${job.id}`,
          kind: "job",
          summary: `任务 ${job.capability} 失败`,
          detail: `任务 ${job.id}${job.serverInstanceId ? `（服务器 ${job.serverInstanceId}）` : ""} 执行失败`,
          targetPage: "servers",
          targetId: job.serverInstanceId,
          tone: "error",
          at: job.updatedAt
        });
      }
    }
    if (providers.status === "ready") {
      for (const provider of providers.data.filter((item) => item.status === "error")) {
        collected.push({
          id: `ai-${provider.id}`,
          kind: "aiProvider",
          summary: `AI 提供商 ${provider.name} 连接异常`,
          detail: `提供商 ${provider.id} 状态为 error，LLM 辅助可能不可用`,
          targetPage: "aiProviders",
          targetId: provider.id,
          tone: "warning",
          at: ""
        });
      }
    }
    if (signals.status === "ready") {
      for (const event of signals.data.slice(0, 5)) {
        collected.push({
          id: `audit-${event.id}`,
          kind: "log",
          summary: event.summary || `${event.action} ${event.resourceKind}`,
          detail: `${event.actorId} 对 ${event.resourceKind}/${event.resourceId} 执行 ${event.action}（${event.result}）`,
          targetPage: event.resourceKind === "server-instance" ? "servers" : "maintenance",
          targetId: event.resourceId,
          tone: event.result === "failure" ? "warning" : "info",
          at: event.createdAt
        });
      }
    }
    return collected.slice(0, 8);
  }, [core, providers, signals]);

  const onlineCount = core.status === "ready" ? core.data.instances.filter((item) => serverIsOnline(item.state)).length : 0;
  const offlineCount = core.status === "ready" ? core.data.instances.length - onlineCount : 0;
  const activeProviders = providers.status === "ready" ? providers.data.filter((item) => item.status === "active").length : 0;
  const errorProviders = providers.status === "ready" ? providers.data.filter((item) => item.status === "error").length : 0;

  const metricAverages = useMemo(() => {
    if (usage.status === "ready") {
      return { cpu: usage.data.cpuPercent, memory: usage.data.memoryPercent, disk: usage.data.diskPercent, source: "平台指标" };
    }
    if (metrics.status === "ready" && metrics.data.length > 0) {
      const average = (values: Array<number | undefined>) => {
        const known = values.filter((value): value is number => typeof value === "number");
        return known.length > 0 ? known.reduce((sum, value) => sum + value, 0) / known.length : undefined;
      };
      return {
        cpu: average(metrics.data.map((item) => item.cpuPercent)),
        memory: average(metrics.data.map((item) => item.memoryPercent)),
        disk: average(metrics.data.map((item) => item.diskPercent)),
        source: "按服务器均值"
      };
    }
    return { cpu: undefined, memory: undefined, disk: undefined, source: "暂无数据" };
  }, [usage, metrics]);

  return (
    <div className="console-page">
      <header className="page-header">
        <div>
          <p className="page-kicker">平台管理员</p>
          <h1 className="page-title">平台概览</h1>
        </div>
        <span className={cx("page-status", core.status === "ready" && "page-status-ready")}>
          {core.status === "ready" ? "数据已加载" : core.status === "loading" ? "加载中" : "部分模块加载失败"}
        </span>
      </header>

      {core.status === "loading" && <LoadingState label="正在加载服务器与任务概况…" />}
      {core.status === "error" && <ErrorState title="平台概况加载失败" reason={core.reason} diagnosticId="overview-core" onRetry={() => void refreshCore()} />}
      {core.status === "ready" && core.data.instances.length === 0 && (
        <EmptyState
          icon={<CakeSlice size={26} />}
          title="还没有服务器实例"
          description="平台尚未创建任何服务器。前往服务器管理创建第一个实例，或检查运行节点是否在线。"
          actionLabel="前往服务器管理"
          onAction={() => onNavigate("servers")}
        />
      )}

      {core.status === "ready" && core.data.instances.length > 0 && (
        <section className="console-grid" aria-label="platform health">
          <article className="overview-card metric-tone-success">
            <span className="metric-label">在线服务器</span>
            <strong className="metric-value">{onlineCount}</strong>
            <p>共 {core.data.instances.length} 个实例</p>
          </article>
          <article className={cx("overview-card", offlineCount > 0 ? "metric-tone-warning" : "metric-tone-neutral")}>
            <span className="metric-label">离线 / 未运行</span>
            <strong className="metric-value">{offlineCount}</strong>
            <p>{core.data.instances.filter((item) => item.state === "failed").length} 个异常</p>
          </article>
          <article className="overview-card metric-tone-neutral">
            <span className="metric-label">运行节点</span>
            <strong className="metric-value">{core.data.endpoints.filter((item) => item.status === "online").length}</strong>
            <p>共 {core.data.endpoints.length} 个节点</p>
          </article>
          <article className={cx("overview-card", errorProviders > 0 ? "metric-tone-warning" : "metric-tone-success")}>
            <span className="metric-label">LLM 连接</span>
            <strong className="metric-value">
              {providers.status === "ready" ? `${activeProviders} 可用` : providers.status === "loading" ? "…" : "未知"}
            </strong>
            <p>{errorProviders > 0 ? `${errorProviders} 个提供商异常` : "提供商状态正常"}</p>
          </article>
        </section>
      )}

      <section className="overview-two-col">
        <article className="console-panel" aria-label="resource usage">
          <div className="panel-header">
            <h2>
              <Activity size={16} style={{ verticalAlign: "-2px" }} /> 资源负载
            </h2>
            <span className="page-status">{metricAverages.source}</span>
          </div>
          <div className="server-card-meters">
            <UsageMeter label="CPU" percent={metricAverages.cpu} />
            <UsageMeter label="内存" percent={metricAverages.memory} />
            <UsageMeter label="磁盘" percent={metricAverages.disk} />
          </div>
        </article>

        <article className="console-panel" aria-label="game type distribution">
          <div className="panel-header">
            <h2>
              <Candy size={16} style={{ verticalAlign: "-2px" }} /> 游戏类型分布
            </h2>
          </div>
          {core.status === "loading" ? (
            <LoadingState label="统计中…" compact />
          ) : distribution.length === 0 ? (
            <EmptyState title="暂无分布数据" description="创建服务器后这里会显示各游戏类型的实例数量。" />
          ) : (
            <div className="action-list">
              {distribution.map((entry) => (
                <span key={entry.serverType}>
                  <strong>{entry.label}</strong>：{entry.count} 个实例
                </span>
              ))}
            </div>
          )}
        </article>
      </section>

      <section className="console-panel" aria-label="recent signals">
        <div className="panel-header">
          <h2>
            <MoonStar size={16} style={{ verticalAlign: "-2px" }} /> 最近运营信号
          </h2>
          <button type="button" className="icon-command" onClick={() => void refreshSignals()}>
            <Sparkles size={14} />
            刷新
          </button>
        </div>
        {signals.status === "loading" && core.status === "loading" ? (
          <LoadingState label="正在收集信号…" compact />
        ) : overviewSignals.length === 0 ? (
          <EmptyState title="暂无异常信号" description="最近没有故障、失败任务或需要关注的审计事件。" />
        ) : (
          <div className="signal-list">
            {overviewSignals.map((signal) => (
              <button
                key={signal.id}
                type="button"
                className={cx("signal-item", `signal-tone-${signal.tone}`)}
                onClick={() =>
                  onNavigate(
                    signal.targetPage === "servers" && signal.targetId ? "serverDetail" : signal.targetPage,
                    signal.targetPage === "servers" && signal.targetId ? { serverId: signal.targetId } : undefined
                  )
                }
              >
                {signal.tone === "error" ? <AlertTriangle size={18} /> : signal.tone === "warning" ? <AlertTriangle size={18} /> : <Info size={18} />}
                <span>
                  <strong>{signal.summary}</strong>
                  <p>{signal.detail}</p>
                </span>
                <span className="provider-id">{signal.at ? new Date(signal.at).toLocaleString() : ""}</span>
              </button>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}