"use client";
import { useMemo, useState } from "react";
import { Search, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import type { AiModel } from "@/lib/db/schema";
import {
  is3DModelDescriptor,
  isVideoModelDescriptor,
  isImageGenerationModelDescriptor,
} from "@/lib/ai/model-classification";

type Model = AiModel & { isAgentModel?: boolean; isMultimodal?: boolean };
type Provider = { id: string; name: string; type: string; isEnabled: boolean };
const selectClass = "h-10 rounded-md border bg-background px-3 text-sm";
export function ModelManagementList({
  models,
  providers,
  error,
  loading,
  onEdit,
  onDelete,
  onRestore,
  onRefresh,
  onHealth,
}: {
  models: Model[];
  providers: Provider[];
  error?: Error;
  loading: boolean;
  onEdit: (model: Model) => Promise<void>;
  onDelete: (id: string) => void;
  onRestore: (model: Model) => void;
  onRefresh: () => void;
  onHealth?: (id: string) => void;
}) {
  const [search, setSearch] = useState("");
  const [provider, setProvider] = useState("");
  const [status, setStatus] = useState("enabled");
  const [kind, setKind] = useState("");
  const [page, setPage] = useState(1);
  const [opening, setOpening] = useState<string | null>(null);
  const rows = useMemo(
    () =>
      models
        .map((model) => {
          const upstream = providers.find((p) => p.id === model.providerId);
          const descriptor = { ...model, providerType: upstream?.type };
          const type = is3DModelDescriptor(descriptor)
            ? "3d"
            : isVideoModelDescriptor(descriptor)
              ? "video"
              : isImageGenerationModelDescriptor(descriptor)
                ? "image"
                : "chat";
          return { model, upstream, type };
        })
        .filter(({ model, upstream, type }) => {
          const text =
            `${model.displayName} ${model.modelId} ${upstream?.name || ""}`.toLowerCase();
          return (
            text.includes(search.trim().toLowerCase()) &&
            (!provider || model.providerId === provider) &&
            (!kind || kind === type) &&
            (status === "all" ||
              (status === "enabled" && model.isEnabled) ||
              (status === "disabled" && !model.isEnabled) ||
              (status === "unhealthy" && model.healthStatus !== "healthy") ||
              (status === "visible" && !model.isHidden))
          );
        }),
    [models, providers, search, provider, status, kind],
  );
  const pages = Math.max(1, Math.ceil(rows.length / 25));
  const currentPage = Math.min(page, pages);
  const change = (fn: () => void) => {
    fn();
    setPage(1);
  };
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-3">
        <div className="relative min-w-56 flex-1">
          <Search className="absolute left-3 top-3 size-4 text-muted-foreground" />
          <Input
            className="h-10 pl-9"
            aria-label="搜索模型"
            placeholder="搜索模型名称、ID 或上游"
            value={search}
            onChange={(e) => change(() => setSearch(e.target.value))}
          />
        </div>
        <select
          aria-label="模型上游"
          className={selectClass}
          value={provider}
          onChange={(e) => change(() => setProvider(e.target.value))}
        >
          <option value="">全部上游</option>
          {providers.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
        <select
          aria-label="模型类型"
          className={selectClass}
          value={kind}
          onChange={(e) => change(() => setKind(e.target.value))}
        >
          <option value="">全部类型</option>
          <option value="image">生图</option>
          <option value="video">视频</option>
          <option value="chat">对话</option>
          <option value="3d">3D / CAD</option>
        </select>
        <select
          aria-label="模型状态"
          className={selectClass}
          value={status}
          onChange={(e) => change(() => setStatus(e.target.value))}
        >
          <option value="enabled">已启用</option>
          <option value="all">全部模型</option>
          <option value="disabled">已停用</option>
          <option value="unhealthy">运行异常</option>
          <option value="visible">前台可见</option>
        </select>
        <Button variant="outline" onClick={onRefresh} aria-label="刷新模型">
          <RefreshCw className="size-4" />
        </Button>
      </div>
      <p className="text-sm text-muted-foreground">
        {loading
          ? "正在加载模型…"
          : `筛选结果 ${rows.length} 个 · 已启用 ${models.filter((m) => m.isEnabled).length} 个 · 全部 ${models.length} 个`}
      </p>
      <div className="flex items-center justify-end gap-2 text-sm text-muted-foreground">
        <span>
          第 {currentPage} / {pages} 页
        </span>
        <Button
          variant="outline"
          size="sm"
          disabled={currentPage === 1}
          onClick={() => setPage(currentPage - 1)}
        >
          上一页
        </Button>
        <Button
          variant="outline"
          size="sm"
          disabled={currentPage === pages}
          onClick={() => setPage(currentPage + 1)}
        >
          下一页
        </Button>
      </div>
      {error ? (
        <div role="alert" className="rounded-xl border p-6 text-sm">
          模型加载失败。
          <Button variant="outline" onClick={onRefresh}>
            重试
          </Button>
        </div>
      ) : loading ? (
        <div role="status" className="h-48 rounded-xl bg-muted motion-safe:animate-pulse" />
      ) : (
        <div className="overflow-x-auto rounded-xl border">
          <table className="w-full min-w-[850px] text-left text-sm">
            <thead className="bg-muted/50 text-xs text-muted-foreground">
              <tr>
                {["模型", "上游 / 类型", "启用", "前台展示", "运行健康", "操作"].map((x) => (
                  <th key={x} className="px-4 py-3 font-medium">
                    {x}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y">
              {rows
                .slice((currentPage - 1) * 25, currentPage * 25)
                .map(({ model, upstream, type }) => (
                  <tr key={model.id} className="hover:bg-muted/30">
                    <td className="max-w-64 px-4 py-4">
                      <div className="font-medium">{model.displayName}</div>
                      <div
                        className="mt-1 truncate text-xs text-muted-foreground"
                        title={model.modelId}
                      >
                        {model.modelId}
                      </div>
                      <div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
                        {model.isDefault && <span>默认模型</span>}
                        {model.isDefaultTextEditModel && <span>文字编辑默认</span>}
                        {model.isAgentModel && <span>Agent</span>}
                        {model.isMultimodal && <span>多模态</span>}
                        {model.isSubModel && <span>子模型</span>}
                      </div>
                    </td>
                    <td className="px-4 py-4">
                      {upstream?.name || "未知上游"}
                      <div className="mt-1 text-xs text-muted-foreground">
                        {{ image: "生图", video: "视频", chat: "对话", "3d": "3D / CAD" }[type]}
                        {upstream && !upstream.isEnabled ? " · 上游已停用" : ""}
                      </div>
                    </td>
                    <td className="whitespace-nowrap px-4 py-4">
                      <span
                        className={`rounded-md px-2 py-1 text-xs ${model.isEnabled ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200" : "bg-muted text-muted-foreground"}`}
                      >
                        {model.isEnabled ? "已启用" : "已停用"}
                      </span>
                    </td>
                    <td className="px-4 py-4">
                      {model.isHidden || model.isSubModel ? "隐藏" : "可见"}
                    </td>
                    <td className="max-w-72 px-4 py-4">
                      <span
                        className={
                          model.healthStatus !== "healthy"
                            ? "text-amber-700 dark:text-amber-300"
                            : "text-muted-foreground"
                        }
                      >
                        {model.healthStatus === "auto_disabled"
                          ? "自动停用"
                          : model.healthStatus === "degraded"
                            ? "观察中"
                            : "正常"}
                      </span>
                      {model.healthConsecutiveFailures > 0 && (
                        <span className="ml-2 text-xs text-muted-foreground">
                          连续失败 {model.healthConsecutiveFailures} 次
                        </span>
                      )}
                      {model.healthLastError && (
                        <details className="mt-2 text-xs">
                          <summary className="cursor-pointer text-muted-foreground">
                            查看最近原因
                          </summary>
                          <p className="mt-2 whitespace-pre-wrap break-words">
                            {model.healthLastError}
                          </p>
                        </details>
                      )}
                      <button
                        type="button"
                        className="mt-2 block text-xs underline underline-offset-4"
                        onClick={() => onHealth?.(model.id)}
                      >
                        故障记录
                      </button>
                      <div className="mt-2 text-xs text-muted-foreground">
                        {model.excludeFromHealthBan && "不自动封禁 "}
                        {model.excludeFromFailover && "不参与迁移"}
                      </div>
                    </td>
                    <td className="px-4 py-4">
                      <div className="flex gap-1">
                        <Button
                          variant="outline"
                          size="sm"
                          disabled={opening !== null}
                          onClick={async () => {
                            setOpening(model.id);
                            try {
                              await onEdit(model);
                            } finally {
                              setOpening(null);
                            }
                          }}
                        >
                          {opening === model.id ? "加载中…" : "编辑"}
                        </Button>
                        {model.healthStatus === "auto_disabled" && (
                          <Button variant="outline" size="sm" onClick={() => onRestore(model)}>
                            恢复
                          </Button>
                        )}
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-destructive"
                          onClick={() => onDelete(model.id)}
                        >
                          删除
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
          {rows.length === 0 && (
            <p className="p-12 text-center text-sm text-muted-foreground">没有符合条件的模型。</p>
          )}
        </div>
      )}
      <div className="flex items-center justify-between text-sm text-muted-foreground">
        <span>
          每页 25 个 · 第 {currentPage} / {pages} 页
        </span>
        <div className="flex gap-2">
          <Button
            aria-label="上一页模型"
            variant="outline"
            disabled={currentPage === 1}
            onClick={() => setPage(currentPage - 1)}
          >
            <ChevronLeft className="size-4" />
          </Button>
          <Button
            aria-label="下一页模型"
            variant="outline"
            disabled={currentPage === pages}
            onClick={() => setPage(currentPage + 1)}
          >
            <ChevronRight className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}