import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { PhongThuyForm } from "@/components/feng-shui/phong-thuy-form";
import { PhongThuyResult } from "@/components/feng-shui/phong-thuy-result";
import { analyzeFengShui } from "@/lib/feng-shui/bat-trach";

export const metadata: Metadata = {
  title: "Phong Thủy Nhà — Hướng nhà theo mệnh",
  description:
    "Xác định cung mệnh (Bát Trạch) từ năm sinh, hướng nhà tốt/xấu, ngũ hành và bảng màu phong thủy phù hợp.",
};

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

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

export default async function PhongThuyNhaPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const sp = await searchParams;
  const yearStr = pickString(sp.y);
  const g = pickString(sp.g);

  const year = yearStr ? parseInt(yearStr, 10) : NaN;
  const gender = g === "Nữ" ? "Nữ" : g === "Nam" ? "Nam" : null;

  if (!yearStr || !gender || Number.isNaN(year)) {
    return <PhaseAForm />;
  }

  let result;
  try {
    result = analyzeFengShui({ year, gender });
  } catch (e) {
    return (
      <PhaseAForm
        error={e instanceof Error ? e.message : "Dữ liệu không hợp lệ. Vui lòng thử lại."}
      />
    );
  }

  return (
    <div className="bg-bg-base relative">
      <div className="bagua-decor absolute inset-0 opacity-30" aria-hidden="true" />
      <div className="max-w-container relative mx-auto px-4 py-10 lg:px-6 lg:py-16">
        <div className="mb-8 flex items-center justify-between">
          <Link
            href="/phong-thuy-nha"
            className="text-ink-secondary hover:text-brand-gold inline-flex items-center gap-1.5 text-sm"
          >
            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
            Tính lại
          </Link>
        </div>

        <div className="mb-8 text-center">
          <div className="ornament-line text-brand-gold-soft mb-2 text-xs tracking-[0.22em] uppercase">
            Bát Trạch · Phong Thủy
          </div>
          <h1 className="font-display text-2xl font-semibold lg:text-4xl">
            Hướng nhà theo <span className="italic">cung mệnh</span>
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            {gender} · sinh năm {year}
          </p>
        </div>

        <PhongThuyResult result={result} year={year} />
      </div>
    </div>
  );
}

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">
            Bát Trạch · Phong Thủy
          </div>
          <h1 className="font-display text-3xl font-semibold lg:text-5xl">
            Phong thủy <span className="italic">nhà cửa</span>
          </h1>
          <p className="text-ink-secondary mx-auto mt-3 max-w-[58ch] text-sm lg:text-base">
            Nhập năm sinh và giới tính để xác định cung mệnh, hướng nhà tốt/xấu, và ngũ hành theo
            phương pháp Bát Trạch cổ truyề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}

        <PhongThuyForm />

        <div className="border-brand-gold/15 bg-bg-elevated/40 mx-auto mt-8 max-w-2xl rounded-lg border p-4 text-xs">
          <p className="text-ink-secondary leading-relaxed">
            <span className="text-ink-primary font-medium">Lưu ý lập xuân:</span> Bát Trạch dùng năm
            âm lịch (mốc Lập Xuân ~mùng 4 tháng 2 dương lịch). Nếu bạn sinh trước Lập Xuân, hãy nhập
            năm trước đó (vd: sinh 1/2/1990 dùng năm 1989).
          </p>
        </div>
      </div>
    </div>
  );
}