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

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

export const metadata: Metadata = {
  title: "Lá số — Tử Vi Số",
  description: "Xem lá số tử vi của bạn và hỏi đáp với AI.",
  robots: { index: false, follow: false },
};

export const dynamic = "force-dynamic";

export default async function MyChartDetailPage({ params }: Props) {
  const { id } = await params;
  const user = await currentUser();
  if (!user) {
    redirect(`/login?from=/la-so/own/${id}`);
  }

  const stored = await prisma.chart.findFirst({
    where: { id, userId: user.id },
    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();
  }

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

  const input = chartInputFrom(stored);

  const userRow = await prisma.user.findUnique({
    where: { id: user.id },
    select: { plan: true },
  });
  const plan: "FREE" | "PREMIUM" = userRow?.plan === "PREMIUM" ? "PREMIUM" : "FREE";

  const lastConversation = await prisma.aIConversation.findFirst({
    where: { userId: user.id, chartId: stored.id, toolKey: "tu-vi-qa" },
    orderBy: { updatedAt: "desc" },
    select: {
      id: true,
      messages: {
        orderBy: { createdAt: "asc" },
        take: 50,
        select: { id: true, role: true, content: true, createdAt: true },
      },
    },
  });

  const initialMessages: QAMessage[] = (lastConversation?.messages ?? [])
    .filter((m) => m.role === "user" || m.role === "assistant")
    .map((m) => ({
      id: m.id,
      role: m.role as "user" | "assistant",
      content: m.content,
      createdAt: m.createdAt.toISOString(),
    }));

  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="/la-so"
            className="text-ink-secondary hover:text-brand-gold inline-flex items-center gap-1.5 text-sm"
          >
            <ArrowLeft className="h-4 w-4" />
            Tất cả lá số
          </Link>
          <div className="flex items-center gap-2">
            {stored.shareToken ? (
              <Link
                href={`/la-so/${stored.shareToken}`}
                className="border-stroke-default text-ink-secondary hover:border-brand-gold/40 hover:text-brand-gold inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs"
              >
                <Share2 className="h-3 w-3" />
                Xem link chia sẻ
              </Link>
            ) : null}
            <span className="border-brand-gold/40 text-brand-gold inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] tracking-wider uppercase">
              <Eye className="h-3 w-3" />
              Của bạn
            </span>
          </div>
        </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.fullName} · {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="mx-auto mt-8 max-w-3xl">
          <ChartQAPanel
            chartId={stored.id}
            initialConversationId={lastConversation?.id ?? null}
            initialMessages={initialMessages}
            plan={plan}
          />
        </div>
      </div>
    </div>
  );
}