import Link from "next/link";
import { ArrowRight } from "@/components/icons";
import { PreviewNotice, StatusCard } from "@/components/ui";

export const metadata = { title: "管理后台" };

export default function AdminPage() {
  return <div className="container-shell py-16 sm:py-24"><div className="flex flex-col justify-between gap-5 border-b border-line pb-10 sm:flex-row sm:items-end"><div><p className="eyebrow">Operations</p><h1 className="mt-5 text-4xl font-semibold tracking-[-0.05em]">管理后台</h1></div><span className="text-sm text-subtle">role=admin / 预览</span></div><div className="mt-8"><PreviewNotice>管理权限、用户查询、会员和额度操作均未接入。此阶段不提供可执行的管理操作。</PreviewNotice></div><div className="mt-8 grid gap-5 md:grid-cols-3"><StatusCard title="用户" description="分页、禁用和恢复将在 Phase 4 接入。" /><StatusCard title="TTS 任务" description="任务、失败和使用量将在 Phase 4 接入。" tone="info" /><StatusCard title="审计" description="操作原因和前后值将在业务 API 接入后记录。" tone="warning" /></div><div className="mt-8 grid gap-4 sm:grid-cols-2"><Link className="group rounded-2xl border border-line bg-panel/50 p-6 hover:border-blue/60" href="/admin/users"><p className="text-xs uppercase tracking-[0.18em] text-subtle">01 / Users</p><h2 className="mt-3 text-xl font-semibold">用户与会员</h2><p className="mt-2 text-sm leading-6 text-muted">布局预览：筛选、状态、Plan 和额度。</p><span className="mt-5 inline-flex text-sm font-semibold text-cyan">打开预览 <ArrowRight /></span></Link><Link className="group rounded-2xl border border-line bg-panel/50 p-6 hover:border-cyan/60" href="/admin/tts"><p className="text-xs uppercase tracking-[0.18em] text-subtle">02 / TTS</p><h2 className="mt-3 text-xl font-semibold">TTS 任务与使用量</h2><p className="mt-2 text-sm leading-6 text-muted">布局预览：任务状态、耗时和错误。</p><span className="mt-5 inline-flex text-sm font-semibold text-cyan">打开预览 <ArrowRight /></span></Link></div></div>;
}