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

export const metadata = { title: "TTS 工作台" };

export default function TtsPage() {
  return (
    <div className="container-shell py-16 sm:py-24">
      <div className="flex flex-col justify-between gap-8 lg:flex-row lg:items-end">
        <SectionHeading eyebrow="AI Lab / Text to Speech" title="把文字变成声音。" description="独立的 TTS 工作台布局预览。生成、历史、回放和下载将在认证、上游适配与额度服务完成后启用。" tone="cyan" />
        <DevPlaceholder>Phase 1 界面预览</DevPlaceholder>
      </div>
      <div className="mt-10"><PreviewNotice>当前不连接真实 TTS 服务，不保存文本，不显示虚假的生成成功状态。</PreviewNotice></div>
      <div className="mt-8 grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
        <section className="rounded-2xl border border-line bg-panel/60 p-5 sm:p-7" aria-labelledby="tts-input-title">
          <div className="flex items-center justify-between gap-4"><div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">01 / Input</p><h2 className="mt-2 text-xl font-semibold" id="tts-input-title">输入文本</h2></div><span className="text-xs text-subtle">0 / 待定字数</span></div>
          <textarea className="field-input mt-6 min-h-64 resize-y leading-7" disabled placeholder="登录后输入需要转换的文本。" />
          <div className="mt-5 flex flex-col gap-4 border-t border-line pt-5 sm:flex-row sm:items-center sm:justify-between"><p className="text-sm text-muted">预计消耗：待额度策略确认</p><Link className="button-primary" href="/login">登录后生成 <ArrowRight /></Link></div>
        </section>
        <aside className="space-y-6">
          <section className="rounded-2xl border border-line bg-panel/60 p-5 sm:p-7" aria-labelledby="tts-settings-title"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">02 / Parameters</p><h2 className="mt-2 text-xl font-semibold" id="tts-settings-title">声音参数</h2><div className="mt-6 space-y-5"><div><label className="field-label" htmlFor="voice">音色</label><select className="field-input" disabled id="voice"><option>音色待上游确认</option></select></div><div><label className="field-label" htmlFor="format">格式</label><select className="field-input" disabled id="format"><option>格式待上游确认</option></select></div></div></section>
          <StatusCard title="额度" description="登录后显示当前周期额度、已用与冻结。" tone="info" />
        </aside>
      </div>
      <section className="mt-8 rounded-2xl border border-line bg-panel/40 p-5 sm:p-7" aria-labelledby="tts-history-title">
        <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center"><div><p className="text-xs font-semibold uppercase tracking-[0.18em] text-subtle">03 / History</p><h2 className="mt-2 text-xl font-semibold" id="tts-history-title">生成历史</h2></div><span className="text-sm text-muted">登录后查看你的任务</span></div>
        <div className="mt-6 flex flex-col items-center justify-center rounded-xl border border-dashed border-line py-14 text-center"><span className="text-cyan"><WaveIcon className="h-9 w-9" /></span><p className="mt-4 font-semibold">还没有生成记录</p><p className="mt-2 max-w-sm text-sm leading-6 text-muted">完成认证和真实 TTS 接入后，任务状态、播放和下载会出现在这里。</p></div>
      </section>
    </div>
  );
}