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

export const metadata = { title: "账户中心" };

export default function AccountPage() {
  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 eyebrow-blue">Account</p><h1 className="mt-5 text-4xl font-semibold tracking-[-0.05em]">账户中心</h1></div><span className="text-sm text-subtle">未登录状态预览</span></div>
      <div className="mt-8"><PreviewNotice>账户数据尚未接入。以下字段只用于检查信息层级，不代表真实用户状态。</PreviewNotice></div>
      <div className="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-4"><StatusCard title="账户状态" description="待认证" tone="info" /><StatusCard title="会员计划" description="Free / 待启用" /><StatusCard title="本周期额度" description="待服务返回" /><StatusCard title="验证状态" description="邮箱、手机均待接入" tone="warning" /></div>
      <div className="mt-8 grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
        <section className="rounded-2xl border border-line bg-panel/60 p-6"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">Profile</p><h2 className="mt-3 text-xl font-semibold">基本资料</h2><dl className="mt-6 space-y-5 text-sm"><div className="flex justify-between gap-4 border-b border-line pb-4"><dt className="text-muted">邮箱</dt><dd className="text-subtle">未登录</dd></div><div className="flex justify-between gap-4 border-b border-line pb-4"><dt className="text-muted">手机号</dt><dd className="text-subtle">未绑定</dd></div><div className="flex justify-between gap-4"><dt className="text-muted">角色</dt><dd className="text-subtle">user / 待服务返回</dd></div></dl><Link className="button-ghost mt-7 w-full" href="/login">前往登录 <ArrowRight /></Link></section>
        <section className="rounded-2xl border border-line bg-panel/60 p-6"><div className="flex items-center justify-between gap-4"><div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">History</p><h2 className="mt-3 text-xl font-semibold">TTS 历史</h2></div><Link className="text-sm text-cyan hover:text-copy" href="/tts">打开工作台</Link></div><div className="mt-8 rounded-xl border border-dashed border-line p-8 text-center"><p className="font-semibold">暂无可显示的历史</p><p className="mt-2 text-sm leading-6 text-muted">登录和 TTS 任务服务完成后，历史记录将在此按用户归属显示。</p></div></section>
      </div>
    </div>
  );
}