import type { Metadata } from "next";
import { VanMenhChat } from "@/components/ai/van-menh-chat";
import { VanMenhForm } from "@/components/ai/van-menh-form";
import { buildChart, type ChartInput } from "@/lib/tuvi/engine";

export const metadata: Metadata = {
  title: "Vận Mệnh AI",
  description:
    "Hỏi AI luận giải vận mệnh dựa trên lá số tử vi của bạn — tình duyên, sự nghiệp, tài lộc, sức khỏe.",
};

type SearchParams = Record<string, string | string[] | undefined>;

function pickString(v: string | string[] | undefined): string | undefined {
  if (Array.isArray(v)) return v[0];
  return v;
}

function parseInput(sp: SearchParams): ChartInput | null {
  const date = pickString(sp.d);
  const t = pickString(sp.t);
  const g = pickString(sp.g);
  const c = pickString(sp.c);
  if (!date || !t || !g || !c) return null;

  const timeIndex = parseInt(t, 10);
  if (Number.isNaN(timeIndex) || timeIndex < 0 || timeIndex > 12) return null;

  const gender = g === "Nữ" ? "Nữ" : g === "Nam" ? "Nam" : null;
  if (!gender) return null;

  const calendar = c === "lunar" ? "lunar" : c === "solar" ? "solar" : null;
  if (!calendar) return null;

  return {
    date,
    timeIndex,
    gender,
    calendar,
    isLeapMonth: pickString(sp.leap) === "1",
    fullName: pickString(sp.n),
  };
}

export default async function VanMenhPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const sp = await searchParams;
  const input = parseInput(sp);

  if (!input) {
    return <PhaseAForm />;
  }

  // Validate by building the chart server-side; if it throws, fall back to form.
  let chart;
  try {
    chart = buildChart(input);
  } catch (e) {
    return (
      <PhaseAForm
        error={e instanceof Error ? e.message : "Không thể lập lá số. Vui lòng thử lại."}
      />
    );
  }

  return (
    <VanMenhChat
      input={input}
      display={{
        fullName: chart.fullName,
        gender: chart.gender,
        solarDate: chart.solarDate,
        lunarDate: chart.lunarDate,
        timeRange: chart.timeRange,
        fiveElements: chart.fiveElements,
        soulStar: chart.soulStar,
      }}
    />
  );
}

function PhaseAForm({ error }: { error?: string }) {
  return (
    <div className="bg-bg-base bagua-decor relative">
      <div className="max-w-container relative mx-auto px-4 py-12 lg:px-6 lg:py-20">
        <div className="mb-8 text-center lg:mb-12">
          <div className="ornament-line text-brand-gold-soft mb-3 text-xs tracking-[0.22em] uppercase">
            Vận Mệnh &ldquo;Thầy&rdquo;
          </div>
          <h1 className="font-display text-3xl font-semibold lg:text-5xl">
            Hỏi &ldquo;Thầy&rdquo; <span className="italic">luận giải</span> vận mệnh
          </h1>
          <p className="text-ink-secondary mx-auto mt-3 max-w-[58ch] text-sm lg:text-base">
            Nhập ngày sinh để tạo lá số, sau đó đặt câu hỏi tự do về tình duyên, sự nghiệp, tài lộc,
            sức khỏe... &ldquo;Thầy&rdquo; sẽ luận giải dựa trên lá số tử vi của bạn.
          </p>
        </div>

        {error ? (
          <div className="border-brand-red/40 bg-brand-red/10 text-brand-red-light mx-auto mb-6 max-w-2xl rounded-md border px-4 py-3 text-sm">
            {error}
          </div>
        ) : null}

        <VanMenhForm />
      </div>
    </div>
  );
}