ai-chatbot/components/admin/media-records-panel.tsx

"use client";
import { useEffect, useState } from "react";
import useSWR from "swr";
import {
  RefreshCw,
  Search,
  ChevronLeft,
  ChevronRight,
  ExternalLink,
  Download,
  Star,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { toast } from "sonner";
import { MediaThumbnail } from "./media-thumbnail";
import { AdminSurface } from "./admin-surface";
import { formatRecordTime } from "@/lib/admin/record-time";
import { buildImageProxyUrl } from "@/lib/image-delivery";

export type MediaRecord = {
  id: string;
  recordType: "image" | "video";
  userName: string | null;
  userEmail: string | null;
  userDepartment: string | null;
  createdAt: string;
  modelId: string | null;
  chatId: string | null;
  thumbnailUrl: string;
  originalUrl: string;
  videoUrl?: string | null;
  prompt: string | null;
  imageSize: string | null;
  isFeatured: boolean;
  featuredCategory: string | null;
  featuredAt?: string | null;
};
type MediaResponse = {
  images: MediaRecord[];
  pagination: {
    total: number;
    totalPages: number;
    totalImages: number;
    totalVideos: number;
    page: number;
  };
};
export async function adminFetcher(url: string) {
  const response = await fetch(url);
  const data = await response.json();
  if (!response.ok) throw new Error(data.error || data.message || "加载失败，请重试");
  return data;
}
const selectClass =
  "h-10 rounded-md border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
function recentDate() {
  const d = new Date();
  d.setDate(d.getDate() - 6);
  return new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Shanghai" }).format(d);
}

export function MediaRecordsPanel({ categories }: { categories: string[] }) {
  const [view, setView] = useState("assets");
  const [search, setSearch] = useState("");
  const [filters, setFilters] = useState({
    search: "",
    type: "all",
    startDate: recentDate(),
    endDate: "",
    model: "",
    featured: "false",
    status: "all",
  });
  const [page, setPage] = useState(1);
  const [selected, setSelected] = useState<MediaRecord | null>(null);
  const [saving, setSaving] = useState(false);
  const [originalFailed, setOriginalFailed] = useState(false);
  const update = (changes: Partial<typeof filters>) => {
    setFilters((f) => ({ ...f, ...changes }));
    setPage(1);
  };
  useEffect(() => {
    const timer = setTimeout(() => {
      setFilters((f) => (f.search === search ? f : { ...f, search }));
      setPage(1);
    }, 350);
    return () => clearTimeout(timer);
  }, [search]);
  const { data: options } = useSWR<{
    models: Array<{ id: string; modelId: string; displayName: string; providerName: string }>;
  }>("/api/admin/ai-models?view=options", adminFetcher, { revalidateOnFocus: false });
  const modelNames = new Map<string, string>();
  for (const model of options?.models || [])
    if (!modelNames.has(model.modelId)) modelNames.set(model.modelId, model.displayName);
  const recordModelNames = new Map(modelNames);
  for (const model of options?.models || []) recordModelNames.set(model.id, model.displayName);
  const openDetails = (item: MediaRecord) => {
    setSelected(item);
    setOriginalFailed(false);
  };
  const query = new URLSearchParams({ ...filters, page: String(page), pageSize: "40" });
  const { data, error, isLoading, isValidating, mutate } = useSWR<MediaResponse>(
    view === "assets" ? `/api/admin/images?${query}` : null,
    adminFetcher,
    { keepPreviousData: true, revalidateOnFocus: false },
  );
  const tasks = useSWR<{
    tasks: Array<{
      id: string;
      userName: string;
      status: string;
      createdAt: string;
      error: string | null;
      model: string | null;
      elapsedMs: number | null;
    }>;
    total: number;
  }>(view === "tasks" ? `/api/admin/media-tasks?${query}` : null, adminFetcher, {
    keepPreviousData: true,
    revalidateOnFocus: false,
  });
  const busy = view === "assets" ? isValidating : tasks.isValidating;
  const failure = view === "assets" ? error : tasks.error;
  const loading = view === "assets" ? isLoading : tasks.isLoading;
  const total = view === "assets" ? data?.pagination.total : tasks.data?.total;
  const pages = Math.max(1, Math.ceil((total || 0) / 40));
  async function save(changes: Partial<MediaRecord>) {
    if (!selected || saving) return;
    setSaving(true);
    try {
      const response = await fetch("/api/admin/images", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageId: selected.id, ...changes }),
      });
      if (!response.ok) throw new Error("保存失败，请重试");
      setSelected({ ...selected, ...changes });
      toast.success("已保存");
      await mutate();
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "保存失败");
    } finally {
      setSaving(false);
    }
  }
  return (
    <AdminSurface>
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight">生成记录</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            查看图片与视频产物，追踪画布任务。时间统一按北京时间展示。
          </p>
        </div>
        <Button
          variant="outline"
          disabled={busy}
          onClick={() => (view === "assets" ? mutate() : tasks.mutate())}
        >
          <RefreshCw className={`mr-2 size-4 ${busy ? "motion-safe:animate-spin" : ""}`} />
          刷新
        </Button>
      </div>
      <div className="flex gap-2" role="tablist" aria-label="记录视图">
        {[
          ["assets", "产物记录"],
          ["tasks", "画布任务"],
        ].map(([key, label]) => (
          <Button
            key={key}
            role="tab"
            aria-selected={view === key}
            variant={view === key ? "default" : "ghost"}
            onClick={() => {
              setView(key);
              setPage(1);
            }}
          >
            {label}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-end gap-3 rounded-xl border bg-background p-4">
        <label className="min-w-48 flex-1 text-xs font-medium">
          用户
          <div className="relative mt-2">
            <Search className="absolute left-3 top-3 size-4 text-muted-foreground" />
            <Input
              className="h-10 pl-9"
              placeholder="搜索姓名或邮箱"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </label>
        {view === "assets" ? (
          <label className="text-xs font-medium">
            类型
            <select
              aria-label="产物类型"
              className={`${selectClass} mt-2 block`}
              value={filters.type}
              onChange={(e) => update({ type: e.target.value })}
            >
              <option value="all">图片与视频</option>
              <option value="image">只看图片</option>
              <option value="video">只看视频</option>
            </select>
          </label>
        ) : (
          <label className="text-xs font-medium">
            任务状态
            <select
              aria-label="任务状态"
              className={`${selectClass} mt-2 block`}
              value={filters.status}
              onChange={(e) => update({ status: e.target.value })}
            >
              <option value="all">全部状态</option>
              <option value="failed">失败</option>
              <option value="running">运行中</option>
              <option value="pending">排队中</option>
              <option value="succeeded">成功</option>
            </select>
          </label>
        )}
        <label className="text-xs font-medium">
          开始日期
          <Input
            aria-label="开始日期"
            className="mt-2 h-10 w-40"
            type="date"
            value={filters.startDate}
            onChange={(e) => update({ startDate: e.target.value })}
          />
        </label>
        <label className="text-xs font-medium">
          结束日期
          <Input
            aria-label="结束日期"
            className="mt-2 h-10 w-40"
            type="date"
            value={filters.endDate}
            onChange={(e) => update({ endDate: e.target.value })}
          />
        </label>
        <Button
          variant="ghost"
          onClick={() => {
            setSearch("");
            update({
              search: "",
              startDate: "",
              endDate: "",
              model: "",
              featured: "false",
              type: "all",
              status: "all",
            });
          }}
        >
          全部时间 / 重置
        </Button>
        {view === "assets" && (
          <div className="flex w-full flex-wrap items-center gap-3">
            <select
              aria-label="记录模型"
              className={`${selectClass} max-w-full sm:max-w-96`}
              value={filters.model}
              onChange={(e) => update({ model: e.target.value })}
            >
              <option value="">全部模型</option>
              {Array.from(modelNames, ([id, name]) => (
                <option key={id} value={id}>
                  {name} · {id}
                </option>
              ))}
            </select>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={filters.featured === "true"}
                onChange={(e) => update({ featured: String(e.target.checked) })}
              />
              只看精选
            </label>
          </div>
        )}
      </div>
      <div
        aria-live="polite"
        className="flex items-center justify-between text-sm text-muted-foreground"
      >
        <span>
          {total === undefined ? "正在读取记录…" : `共 ${total.toLocaleString()} 条记录`}
          {view === "assets" && data
            ? ` · 图片 ${data.pagination.totalImages.toLocaleString()} · 视频 ${data.pagination.totalVideos.toLocaleString()}`
            : ""}
        </span>
        {busy && !loading && <span>正在更新…</span>}
      </div>
      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
        <span>
          第 {page} / {pages} 页 · 每页 40 条
        </span>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            disabled={busy || page === 1}
            onClick={() => setPage((p) => p - 1)}
          >
            上一页
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={busy || page >= pages}
            onClick={() => setPage((p) => p + 1)}
          >
            下一页
          </Button>
        </div>
      </div>
      {failure ? (
        <div role="alert" className="rounded-xl border border-destructive/30 p-6 text-sm">
          <p>{failure.message}</p>
          <Button
            className="mt-3"
            variant="outline"
            onClick={() => (view === "assets" ? mutate() : tasks.mutate())}
          >
            重试加载
          </Button>
        </div>
      ) : loading ? (
        <div role="status" className="space-y-3 rounded-xl border p-6">
          {[0, 1, 2, 3].map((x) => (
            <div key={x} className="h-16 rounded-lg bg-muted motion-safe:animate-pulse" />
          ))}
          <span className="sr-only">正在加载记录</span>
        </div>
      ) : total === 0 ? (
        <div className="rounded-xl border border-dashed p-12 text-center text-sm text-muted-foreground">
          没有符合条件的记录，请调整筛选条件。
        </div>
      ) : (
        <div className="overflow-x-auto rounded-xl border bg-background" aria-busy={busy}>
          {view === "assets" ? (
            <table className="w-full min-w-[720px] text-left text-sm">
              <thead className="bg-muted/50 text-xs text-muted-foreground">
                <tr>
                  {["产物", "用户", "生成时间", "模型 / 尺寸", "精选", ""].map((v, i) => (
                    <th key={i} className="px-4 py-3 font-medium">
                      {v}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y">
                {data?.images.map((item) => (
                  <tr key={item.id} className="hover:bg-muted/30">
                    <td className="p-4">
                      <div>
                        <MediaThumbnail
                          url={item.thumbnailUrl}
                          video={item.recordType === "video"}
                          onOpen={() => openDetails(item)}
                        />
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <div className="font-medium">{item.userName || item.userEmail}</div>
                      <div className="mt-1 text-xs text-muted-foreground">
                        {item.userDepartment || "未设置部门"}
                      </div>
                    </td>
                    <td className="whitespace-nowrap px-4 py-3 tabular-nums">
                      {formatRecordTime(item.createdAt)}
                    </td>
                    <td className="max-w-64 px-4 py-3">
                      <div className="truncate" title={item.modelId || ""}>
                        {recordModelNames.get(item.modelId || "") || item.modelId || "未记录模型"}
                      </div>
                      <div className="mt-1 text-xs text-muted-foreground">
                        {item.recordType === "video" ? "视频" : "图片"} ·{" "}
                        {item.imageSize || "未知尺寸"}
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      {item.isFeatured ? (
                        <span className="inline-flex items-center gap-1 text-amber-700 dark:text-amber-300">
                          <Star className="size-3" />
                          {item.featuredCategory || "精选"}
                        </span>
                      ) : (
                        "—"
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <Button variant="ghost" size="sm" onClick={() => openDetails(item)}>
                        详情
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <table className="w-full min-w-[720px] text-left text-sm">
              <thead className="bg-muted/50">
                <tr>
                  {["用户 / 时间", "状态", "模型", "耗时", "失败原因 / 任务编号"].map((x) => (
                    <th key={x} className="px-4 py-3 font-medium">
                      {x}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y">
                {tasks.data?.tasks.map((task) => (
                  <tr key={task.id}>
                    <td className="px-4 py-4">
                      {task.userName}
                      <div className="mt-1 text-xs text-muted-foreground">
                        {formatRecordTime(task.createdAt)}
                      </div>
                    </td>
                    <td className="px-4 py-4">
                      {{ failed: "失败", running: "运行中", succeeded: "成功", pending: "排队中" }[
                        task.status
                      ] || task.status}
                    </td>
                    <td className="max-w-48 break-words px-4 py-4">{task.model || "自动选择"}</td>
                    <td className="px-4 py-4 tabular-nums">
                      {task.elapsedMs === null ? "—" : `${Math.round(task.elapsedMs / 1000)} 秒`}
                    </td>
                    <td className="max-w-xl break-words px-4 py-4">
                      <p className={task.error ? "text-destructive" : "text-muted-foreground"}>
                        {task.error || "—"}
                      </p>
                      <code className="mt-2 block text-xs text-muted-foreground">{task.id}</code>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      )}
      <div className="flex flex-wrap items-center justify-between gap-3">
        <span className="text-sm text-muted-foreground">
          每页 40 条 · 第 {page} / {pages} 页
        </span>
        <div className="flex items-center gap-2">
          <Button variant="outline" disabled={busy || page === 1} onClick={() => setPage(1)}>
            首页
          </Button>
          <Button
            aria-label="上一页"
            variant="outline"
            disabled={busy || page === 1}
            onClick={() => setPage((p) => p - 1)}
          >
            <ChevronLeft className="size-4" />
          </Button>
          <Button
            aria-label="下一页"
            variant="outline"
            disabled={busy || page >= pages}
            onClick={() => setPage((p) => p + 1)}
          >
            <ChevronRight className="size-4" />
          </Button>
          <Button variant="outline" disabled={busy || page >= pages} onClick={() => setPage(pages)}>
            末页
          </Button>
        </div>
      </div>
      <Dialog
        open={!!selected}
        onOpenChange={(open) => {
          if (!open) setSelected(null);
        }}
      >
        <DialogContent className="max-h-[90vh] max-w-4xl overflow-y-auto bg-background">
          <DialogHeader>
            <DialogTitle>{selected?.recordType === "video" ? "视频详情" : "图片详情"}</DialogTitle>
          </DialogHeader>
          {selected && (
            <div className="space-y-6">
              <div className="flex min-h-40 justify-center rounded-xl bg-muted">
                {selected.recordType === "video" ? (
                  <video
                    src={selected.videoUrl || selected.originalUrl}
                    controls
                    preload="none"
                    className="max-h-[45vh] w-full"
                  />
                ) : originalFailed ? (
                  <div role="alert" className="p-8 text-sm">
                    原图无法加载，源文件可能已过期或存储不可达。
                    <Button
                      className="ml-3"
                      variant="outline"
                      onClick={() => setOriginalFailed(false)}
                    >
                      重试
                    </Button>
                  </div>
                ) : (
                  <img
                    src={selected.originalUrl}
                    alt="生成原图"
                    className="max-h-[45vh] object-contain"
                    onError={() => setOriginalFailed(true)}
                  />
                )}
              </div>
              <dl className="grid gap-4 text-sm sm:grid-cols-2">
                {[
                  ["用户", selected.userName || selected.userEmail],
                  ["部门", selected.userDepartment],
                  ["生成时间", formatRecordTime(selected.createdAt)],
                  ["尺寸", selected.imageSize],
                  ["模型", recordModelNames.get(selected.modelId || "") || selected.modelId],
                  ["精选时间", selected.featuredAt ? formatRecordTime(selected.featuredAt) : "—"],
                ].map(([k, v]) => (
                  <div key={k}>
                    <dt className="text-xs text-muted-foreground">{k}</dt>
                    <dd className="mt-1 break-words">{v || "未记录"}</dd>
                  </div>
                ))}
              </dl>
              <div>
                <h3 className="text-sm font-medium">提示词</h3>
                <p className="mt-2 whitespace-pre-wrap break-words text-sm text-muted-foreground">
                  {selected.prompt || "未记录提示词"}
                </p>
              </div>
              <div className="flex flex-wrap gap-3">
                <Button variant="outline" asChild>
                  <a href={selected.originalUrl} target="_blank" rel="noreferrer">
                    <ExternalLink className="mr-2 size-4" />
                    打开原文件
                  </a>
                </Button>
                {selected.recordType === "image" && (
                  <Button variant="outline" asChild>
                    <a
                      href={buildImageProxyUrl(selected.originalUrl, { delivery: "original" })}
                      download
                    >
                      <Download className="mr-2 size-4" />
                      下载原图
                    </a>
                  </Button>
                )}
              </div>
              {selected.recordType === "image" && (
                <div className="flex flex-wrap items-center gap-3 rounded-xl border p-4">
                  <select
                    aria-label="精选分类"
                    className={selectClass}
                    value={selected.featuredCategory || ""}
                    onChange={(e) =>
                      setSelected({ ...selected, featuredCategory: e.target.value || null })
                    }
                  >
                    <option value="">未分类</option>
                    {[...new Set([...categories, selected.featuredCategory].filter(Boolean))].map(
                      (c) => (
                        <option key={c} value={c!}>
                          {c}
                        </option>
                      ),
                    )}
                  </select>
                  <Button
                    variant="outline"
                    disabled={saving}
                    onClick={() => save({ featuredCategory: selected.featuredCategory })}
                  >
                    保存分类
                  </Button>
                  <Button
                    disabled={saving}
                    onClick={() => save({ isFeatured: !selected.isFeatured })}
                  >
                    <Star className="mr-2 size-4" />
                    {selected.isFeatured ? "取消精选" : "设为精选"}
                  </Button>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </AdminSurface>
  );
}