import type { Metadata } from "next";
import Link from "next/link";

import { BirthTimeReconstructionRefineForm } from "@/features/birth-time-reconstruction/BirthTimeReconstructionRefineForm";

type PageProps = { params: Promise<{ id: string }> };

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { id } = await params;
  return {
    title: "Tinh chỉnh kết quả",
    description: `Tinh chỉnh ước lượng khung giờ — ${id.slice(0, 8)}…`,
  };
}

export default async function BirthTimeRefinePage({ params }: PageProps) {
  const { id } = await params;
  return (
    <main className="ctkp-fade-in-slow ctkp-result-canvas relative flex flex-1 flex-col overflow-x-hidden">
      <div className="relative z-[1] mx-auto w-full min-w-0 max-w-xl flex-1 px-4 py-12 sm:px-8 sm:py-16 md:max-w-2xl">
        <p className="ctkp-eyebrow text-center text-[10px] tracking-[0.28em]">Tinh chỉnh · ước lượng xác suất</p>
        <h1 className="font-ctkp-display mt-4 text-center text-2xl font-semibold text-[color:var(--ctkp-text-main)]">
          Vài câu bổ sung
        </h1>
        <p className="mx-auto mt-4 max-w-lg text-center text-sm leading-relaxed text-[color:var(--ctkp-text-secondary)]">
          Trả lời ngắn để hệ thống tách thêm giữa các khung giờ đang gần nhau. Đây vẫn là mô hình heuristic — không thay thế
          lá số hay engine tử vi.
        </p>
        <div className="mt-10">
          <BirthTimeReconstructionRefineForm submissionId={id} />
        </div>
        <p className="mt-10 text-center text-sm">
          <Link href={`/birth-time-reconstruction/result/${id}`} className="ctkp-text-link">
            Quay lại kết quả
          </Link>
        </p>
      </div>
    </main>
  );
}