import type { Metadata } from "next";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayCard } from "@/components/calendar/day-card";
import { MonthGrid } from "@/components/calendar/month-grid";
import { getDayInfo, buildMonthGrid } from "@/lib/calendar/engine";
import { DateInput } from "@/components/ui/date-input";

export const metadata: Metadata = {
  title: "Lịch Âm Dương",
  description:
    "Tra cứu lịch âm dương, ngày Hoàng đạo / Hắc đạo, giờ tốt giờ xấu, việc nên làm và kiêng làm theo cổ thư.",
};

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 todayISO(): string {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
}

function formatISO(year: number, month: number): string {
  return `${year}-${String(month).padStart(2, "0")}`;
}

function parseDateParam(v: string | undefined): { y: number; m: number; d: number } | null {
  if (!v) return null;
  const m = v.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
  if (!m) return null;
  return { y: parseInt(m[1], 10), m: parseInt(m[2], 10), d: parseInt(m[3], 10) };
}

function shiftMonth(year: number, month: number, delta: number): { y: number; m: number } {
  const d = new Date(year, month - 1 + delta, 1);
  return { y: d.getFullYear(), m: d.getMonth() + 1 };
}

export default async function LichAmDuongPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const sp = await searchParams;
  const todayStr = todayISO();
  const dParam = parseDateParam(pickString(sp.d));
  const todayParsed = parseDateParam(todayStr)!;

  // Selected day (defaults to today)
  const selected = dParam ?? todayParsed;
  const selectedISO = `${selected.y}-${String(selected.m).padStart(2, "0")}-${String(selected.d).padStart(2, "0")}`;

  // Month being shown — separate from selected day so user can browse
  const mParam = pickString(sp.m);
  let viewYear = selected.y;
  let viewMonth = selected.m;
  if (mParam) {
    const ym = mParam.match(/^(\d{4})-(\d{1,2})$/);
    if (ym) {
      viewYear = parseInt(ym[1], 10);
      viewMonth = parseInt(ym[2], 10);
    }
  }

  let info;
  try {
    info = getDayInfo(`${selected.y}-${selected.m}-${selected.d}`);
  } catch (e) {
    return (
      <div className="max-w-container mx-auto px-4 py-12 lg:px-6 lg:py-20">
        <div className="border-brand-red/40 bg-brand-red/10 text-brand-red-light rounded-md border px-4 py-3 text-sm">
          {e instanceof Error ? e.message : "Không thể tra ngày."}
        </div>
      </div>
    );
  }
  const cells = buildMonthGrid(viewYear, viewMonth, todayStr);

  const prev = shiftMonth(viewYear, viewMonth, -1);
  const next = shiftMonth(viewYear, viewMonth, +1);

  return (
    <div className="bg-bg-base bagua-decor relative">
      <div className="max-w-container relative mx-auto px-4 py-10 lg:px-6 lg:py-16">
        <div className="mb-8 text-center">
          <div className="ornament-line text-brand-gold-soft mb-2 text-xs tracking-[0.22em] uppercase">
            Lịch âm dương
          </div>
          <h1 className="font-display text-3xl font-semibold lg:text-5xl">
            Tra cứu <span className="italic">ngày tốt giờ tốt</span>
          </h1>
          <p className="text-ink-secondary mx-auto mt-3 max-w-[58ch] text-sm lg:text-base">
            Lịch vạn niên — đổi âm dương, xác định ngày Hoàng đạo / Hắc đạo, giờ tốt, việc nên làm
            và kiêng kỵ.
          </p>
        </div>

        {/* Quick jump form */}
        <form
          action="/lich-am-duong"
          method="GET"
          className="border-stroke-subtle bg-bg-elevated/40 mx-auto mb-8 flex max-w-2xl flex-wrap items-end gap-3 rounded-2xl border p-4 lg:p-5"
        >
          <div className="min-w-[180px] flex-1">
            <label htmlFor="d" className="text-ink-secondary mb-1 block text-xs">
              Tra ngày dương lịch
            </label>
            <DateInput id="d" name="d" defaultValue={selectedISO} />
          </div>
          <button
            type="submit"
            className="bg-brand-gold text-bg-base rounded-md px-5 py-2 text-sm font-medium hover:brightness-105"
          >
            Tra cứu
          </button>
        </form>

        {/* Day card */}
        <div className="mb-10">
          <DayCard info={info} />
        </div>

        {/* Month grid */}
        <div className="mb-4 flex items-center justify-between">
          <Link
            href={`/lich-am-duong?d=${selectedISO}&m=${formatISO(prev.y, prev.m)}`}
            className="border-stroke-default text-ink-secondary hover:border-brand-gold/50 hover:text-brand-gold inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm"
          >
            <ChevronLeft className="h-4 w-4" aria-hidden="true" />
            Tháng trước
          </Link>
          <span className="text-ink-secondary text-sm">
            Đang xem: tháng {viewMonth}/{viewYear}
          </span>
          <Link
            href={`/lich-am-duong?d=${selectedISO}&m=${formatISO(next.y, next.m)}`}
            className="border-stroke-default text-ink-secondary hover:border-brand-gold/50 hover:text-brand-gold inline-flex items-center gap-1 rounded-md border px-3 py-1.5 text-sm"
          >
            Tháng sau
            <ChevronRight className="h-4 w-4" aria-hidden="true" />
          </Link>
        </div>
        <MonthGrid year={viewYear} month={viewMonth} cells={cells} />

        <div className="border-brand-red/20 bg-brand-red/5 mx-auto mt-8 max-w-3xl rounded-lg border p-4 text-xs">
          <p className="text-ink-secondary leading-relaxed">
            <span className="text-ink-primary font-medium">Lưu ý:</span> Việc nên làm / kiêng làm và
            phân loại Hoàng đạo / Hắc đạo dựa trên cổ thư Trung Hoa và truyền thống Việt Nam, chỉ
            mang tính tham khảo.
          </p>
        </div>
      </div>
    </div>
  );
}