UHD_Media_Tool/apps/web/app/routes/console/sites.tsx

import { Globe, LayoutGrid, List, Plus, RefreshCw } from "lucide-react";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";
import { useSites } from "~/api/sites.ts";
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
import { FilterSelect } from "~/components/console/filter-bar.tsx";
import { PageHeader } from "~/components/console/page-header.tsx";
import { SiteAddDialog } from "~/components/sites/site-add-dialog.tsx";
import { SiteCard, SiteTable } from "~/components/sites/site-card.tsx";
import { type SiteDialog, SiteDialogHost, useSiteChecks } from "~/components/sites/site-dialogs.tsx";
import { needsAttention, type SortKey, sortSites } from "~/components/sites/site-fields.ts";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";

// 资源 → 站点:站点、凭证、健康、账号数据的唯一入口(docs/design/site-center.md §4)

const VIEW_KEY = "umt.sites.view";
type View = "cards" | "list";
type Filter = "all" | "enabled" | "attention";

const FILTERS: { value: Filter; label: string }[] = [
  { value: "all", label: "全部" },
  { value: "enabled", label: "已启用" },
  { value: "attention", label: "需处理" },
];
const SORTS: { value: SortKey; label: string }[] = [
  { value: "name", label: "名称" },
  { value: "ratio", label: "分享率" },
  { value: "upload", label: "上传" },
  { value: "lastLogin", label: "上次登录" },
];

function readStoredView(): View | null {
  try {
    const v = localStorage.getItem(VIEW_KEY);
    return v === "cards" || v === "list" ? v : null;
  } catch {
    return null;
  }
}

export const meta = () => [{ title: "站点 · UHD 媒体自动化控制台" }];

export default function SitesPage() {
  const sites = useSites();
  const [params, setParams] = useSearchParams();
  const [adding, setAdding] = useState(false);
  const [dialog, setDialog] = useState<SiteDialog | null>(null);
  const checks = useSiteChecks(setDialog);

  const urlView = params.get("view");
  const [storedView, setStoredView] = useState<View>("cards");
  useEffect(() => {
    const v = readStoredView();
    if (v) setStoredView(v);
  }, []);
  const view: View = urlView === "list" || urlView === "cards" ? urlView : storedView;
  const filter = (FILTERS.find((f) => f.value === params.get("filter"))?.value ?? "all") as Filter;
  const sort = (SORTS.find((s) => s.value === params.get("sort"))?.value ?? "name") as SortKey;

  const setParam = (k: string, v: string | null) =>
    setParams(
      (p) => {
        if (v) p.set(k, v);
        else p.delete(k);
        return p;
      },
      { replace: true },
    );
  const setView = (v: View) => {
    setStoredView(v);
    try {
      localStorage.setItem(VIEW_KEY, v);
    } catch {
      // 隐私模式等:只在本次会话记住
    }
    setParam("view", v);
  };

  // 待处理"改用 Cookie"深链:?credentials=<siteId>
  const credFor = params.get("credentials");
  // biome-ignore lint/correctness/useExhaustiveDependencies: 只在数据到达时处理一次
  useEffect(() => {
    if (!credFor || !sites.data) return;
    const s = sites.data.items.find((x) => x.id === credFor);
    if (s) setDialog({ kind: "credentials", site: s, loginKind: "cookie" });
    setParam("credentials", null);
  }, [credFor, sites.data]);

  const all = sites.data?.items ?? [];
  const attention = all.filter(needsAttention).length;
  const shown = sortSites(
    all.filter((s) => (filter === "enabled" ? s.enabled : filter === "attention" ? needsAttention(s) : true)),
    sort,
  );

  return (
    <>
      <PageHeader
        title="站点"
        description="凭证、账号数据和健康状态;点站点名看资源、快照与 Feed"
        actions={
          <>
            <Button variant="outline" size="sm" onClick={() => void sites.refetch()} disabled={sites.isFetching}>
              <RefreshCw className={sites.isFetching ? "animate-spin" : undefined} />
              刷新
            </Button>
            <Button size="sm" onClick={() => setAdding(true)}>
              <Plus />
              添加站点
            </Button>
          </>
        }
      />

      {all.length ? (
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
          <div className="flex flex-wrap items-center gap-2">
            <Segmented
              label="筛选"
              value={filter}
              onChange={(v) => setParam("filter", v === "all" ? null : v)}
              options={FILTERS.map((f) => ({
                ...f,
                label: f.value === "attention" && attention ? `${f.label} ${attention}` : f.label,
              }))}
            />
            <FilterSelect
              label="排序"
              value={sort === "name" ? "" : sort}
              onChange={(v) => setParam("sort", v || null)}
              allLabel="名称"
              options={SORTS.filter((x) => x.value !== "name")}
            />
          </div>
          <Segmented
            label="视图"
            value={view}
            onChange={(v) => setView(v as View)}
            options={[
              { value: "cards", label: "卡片", icon: <LayoutGrid className="h-3.5 w-3.5" /> },
              { value: "list", label: "列表", icon: <List className="h-3.5 w-3.5" /> },
            ]}
          />
        </div>
      ) : null}

      {sites.isPending ? (
        <div className="pg-slab rounded-xl p-4">
          <LoadingState rows={4} />
        </div>
      ) : sites.error && !sites.data ? (
        <ErrorState error={sites.error} onRetry={() => void sites.refetch()} />
      ) : !all.length ? (
        <EmptyState
          icon={Globe}
          title="还没有站点"
          description="添加站点并填写凭证后,这里显示账号数据和健康状态"
          action={
            <Button size="sm" onClick={() => setAdding(true)}>
              <Plus />
              添加站点
            </Button>
          }
        />
      ) : !shown.length ? (
        <EmptyState
          icon={Globe}
          title={filter === "attention" ? "没有需处理的站点" : "没有已启用的站点"}
          description="切换到「全部」查看其余站点"
        />
      ) : view === "list" ? (
        <SiteTable sites={shown} checks={checks} onDialog={setDialog} />
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {shown.map((s) => (
            <SiteCard key={s.id} site={s} checks={checks} onDialog={setDialog} />
          ))}
        </div>
      )}

      {adding ? <SiteAddDialog onClose={() => setAdding(false)} /> : null}
      <SiteDialogHost dialog={dialog} onClose={() => setDialog(null)} />
    </>
  );
}

function Segmented({
  label,
  value,
  onChange,
  options,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  options: { value: string; label: string; icon?: React.ReactNode }[];
}) {
  return (
    <div role="radiogroup" aria-label={label} className="inline-flex gap-0.5 rounded-xl border border-border p-0.5">
      {options.map((o) => (
        // biome-ignore lint/a11y/useSemanticElements: 分段按钮
        <button
          key={o.value}
          type="button"
          role="radio"
          aria-checked={value === o.value}
          onClick={() => onChange(o.value)}
          className={cn(
            "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-caption transition-colors",
            value === o.value
              ? "bg-foreground text-background"
              : "text-muted-foreground hover:bg-accent hover:text-foreground",
          )}
        >
          {o.icon}
          {o.label}
        </button>
      ))}
    </div>
  );
}