import type { ReactNode } from "react";
import { Icon, type IconName } from "../../../components/Icon";
import { Tag, type TagTone } from "../../../components/primitives";
import { navigateAdmin, type AdminSectionId } from "../../router";

/** Honest per-card state: real data landed / still loading / endpoint failed /
 *  no endpoint exists in lib/api.ts (a placeholder, never a fabricated value). */
export type MetricState = "ok" | "loading" | "error" | "placeholder";

/** One derived overview card (design/10 §4: 卡片多而全, 详情在各独立页面). */
export interface MiniMetricSpec {
  icon: IconName;
  label: string;
  value: string;
  hint: string;
  /** 可选的补充详情行：逐行渲染在 `hint` 下方。**不传时卡片与既有形状
   *  逐字等价**（其它卡片因此一字未改）；存储卡用它把 PG 增强状态单独
   *  摆一行，而不是挤进 `hint`。 */
  extra?: string[];
  state: MetricState;
  /** Admin module this card drills down to; absent = not a link. */
  section?: AdminSectionId;
}

const STATE_BADGE: Record<MetricState, { label: string; tone: TagTone }> = {
  ok: { label: "已接入", tone: "ok" },
  loading: { label: "加载中", tone: "neutral" },
  error: { label: "端点报错", tone: "err" },
  placeholder: { label: "占位", tone: "warn" },
};

export function MiniMetric({ icon, label, value, hint, extra, state, section }: MiniMetricSpec): ReactNode {
  const badge = STATE_BADGE[state];
  const body = (
    <>
      <div className="flex items-center gap-1.5 text-xs text-[var(--mu-text-lo)]">
        <Icon name={icon} size={14} />
        <span className="truncate">{label}</span>
        <Tag tone={badge.tone} className="ml-auto shrink-0">{badge.label}</Tag>
      </div>
      <div className="mt-1.5 text-lg font-semibold leading-tight">{value}</div>
      <div className="mt-0.5 break-words text-xs text-[var(--mu-text-lo)]">{hint}</div>
      {extra?.map((line) => (
        <div key={line} className="mt-0.5 break-words text-xs text-[var(--mu-text-lo)]">
          {line}
        </div>
      ))}
    </>
  );
  const base =
    "rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)]/60 p-3";
  if (!section) return <div className={base}>{body}</div>;
  return (
    <button
      type="button"
      title="点击下钻"
      onClick={() => navigateAdmin(section)}
      className={`${base} text-left transition-all duration-200 ease-[var(--mu-spring)] hover:border-[var(--mu-accent)]/50`}
    >
      {body}
    </button>
  );
}