import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, Eye } from "lucide-react";
import { prisma } from "@/lib/db";
import { ChartGrid } from "@/components/tuvi/chart-grid";
import { renderStoredChart, TIME_INDEX_LABELS, chartInputFrom } from "@/lib/charts";

type Props = { params: Promise<{ token: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { token } = await params;
  const chart = await prisma.chart.findUnique({
    where: { shareToken: token },
    select: { label: true, gender: true, birthDate: true },
  });
  if (!chart) {
    return { title: "Lá số không tồn tại — Tử Vi Số" };
  }
  return {
    title: `${chart.label} (${chart.gender === "FEMALE" ? "Nữ" : "Nam"}, ${chart.birthDate.toLocaleDateString(
      "vi-VN",
      { day: "2-digit", month: "2-digit", year: "numeric" }
    )}) — Tử Vi Số`,
    description: "Lá số tử vi đẩu số, chia sẻ chỉ-đọc.",
    robots: { index: false, follow: false },
  };
}

export default async function PublicChartPage({ params }: Props) {
  const { token } = await params;

  const stored = await prisma.chart.findUnique({
    where: { shareToken: token },
    select: {
      id: true,
      label: true,
      fullName: true,
      birthDate: true,
      birthTime: true,
      gender: true,
      isLunar: true,
      shareToken: true,
      isDefault: true,
      createdAt: true,
      updatedAt: true,
    },
  });

  if (!stored) {
    notFound();
  }

  // Mask name on public share — keep label only.
  const maskedStored = { ...stored, fullName: stored.label };

  let chart;
  try {
    chart = renderStoredChart(maskedStored);
  } catch {
    notFound();
  }

  const input = chartInputFrom(stored);

  return (
    <div className="bg-bg-base relative">
      <div className="bagua-decor absolute inset-0 opacity-40" aria-hidden="true" />
      <div className="max-w-container relative mx-auto px-4 py-10 lg:px-6 lg:py-16">
        <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
          <Link
            href="/"
            className="text-ink-secondary hover:text-brand-gold inline-flex items-center gap-1.5 text-sm"
          >
            <ArrowLeft className="h-4 w-4" />
            Về trang chủ
          </Link>
          <span className="border-stroke-default text-ink-muted inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] tracking-wider uppercase">
            <Eye className="h-3 w-3" />
            Chia sẻ chỉ-đọc
          </span>
        </div>

        <div className="mb-6 text-center">
          <div className="ornament-line text-brand-gold-soft mb-2 text-xs tracking-[0.22em] uppercase">
            Tử Vi Đẩu Số
          </div>
          <h1 className="font-display text-2xl font-semibold lg:text-4xl">
            Lá số <span className="italic">{stored.label}</span>
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            {stored.gender === "FEMALE" ? "Nữ" : "Nam"} · {chart.solarDate} ({chart.lunarDate}) ·{" "}
            {TIME_INDEX_LABELS[input.timeIndex] ?? ""}
          </p>
        </div>

        <div className="mx-auto max-w-5xl">
          <ChartGrid chart={chart} />
        </div>

        <div className="border-stroke-subtle bg-bg-elevated/40 mx-auto mt-8 max-w-3xl rounded-lg border p-4 text-center text-xs">
          <p className="text-ink-secondary">
            Đây là lá số được chia sẻ. Để lập lá số của riêng bạn,{" "}
            <Link href="/tu-vi-tron-doi" className="text-brand-gold hover:underline">
              bấm vào đây
            </Link>
            .
          </p>
        </div>
      </div>
    </div>
  );
}