import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, Calendar, CheckCircle2, AlertTriangle, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";
import { DateInput } from "@/components/ui/date-input";
import {
  findGoodDays,
  PURPOSE_LABELS,
  ALL_PURPOSES,
  type GoodDayPurpose,
} from "@/lib/calendar/engine";

export const metadata: Metadata = {
  title: "Xem Ngày Tốt",
  description:
    "Tìm ngày tốt cho cưới hỏi, khai trương, chuyển nhà, động thổ, an táng — dựa trên Hoàng đạo và việc nên/kiêng theo cổ thư.",
};

const DAY_OF_WEEK_VI = ["Chủ nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"];

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

function isValidPurpose(s: string | undefined): s is GoodDayPurpose {
  return !!s && ALL_PURPOSES.includes(s as GoodDayPurpose);
}

export default async function XemNgayTotPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const sp = await searchParams;
  const purposeParam = pickString(sp.p);
  const fromParam = pickString(sp.from);
  const toParam = pickString(sp.to);

  const purpose = isValidPurpose(purposeParam) ? purposeParam : null;
  const from = fromParam ?? todayPlus(0);
  const to = toParam ?? todayPlus(60);

  const hits = purpose ? findGoodDays(purpose, from, to, 30) : [];

  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">
            Tra ngày tốt
          </div>
          <h1 className="font-display text-3xl font-semibold lg:text-5xl">
            Tìm <span className="italic">ngày tốt</span> cho mọi việc
          </h1>
          <p className="text-ink-secondary mx-auto mt-3 max-w-[58ch] text-sm lg:text-base">
            Chọn mục đích + khoảng thời gian, hệ thống xếp hạng các ngày Hoàng đạo và phù hợp với
            việc cần làm.
          </p>
        </div>

        {/* Filter form */}
        <form
          action="/xem-ngay-tot"
          method="GET"
          className="border-gold-glow bg-bg-elevated/60 mx-auto mb-10 max-w-3xl rounded-2xl p-5 backdrop-blur-sm lg:p-7"
        >
          <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <div>
              <label htmlFor="p" className="text-ink-secondary mb-1.5 block text-sm">
                Mục đích
              </label>
              <select
                id="p"
                name="p"
                defaultValue={purpose ?? ""}
                required
                className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold w-full rounded-md border px-3 py-2.5 text-sm focus:outline-none"
              >
                <option value="" disabled>
                  -- Chọn việc cần làm --
                </option>
                {ALL_PURPOSES.map((p) => (
                  <option key={p} value={p}>
                    {PURPOSE_LABELS[p]}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label htmlFor="from" className="text-ink-secondary mb-1.5 block text-sm">
                Từ ngày
              </label>
              <DateInput id="from" name="from" defaultValue={from} />
            </div>
            <div>
              <label htmlFor="to" className="text-ink-secondary mb-1.5 block text-sm">
                Đến ngày
              </label>
              <DateInput id="to" name="to" defaultValue={to} />
            </div>
          </div>

          <button
            type="submit"
            className="from-brand-gold via-brand-gold-soft to-brand-gold text-bg-base mt-5 flex w-full items-center justify-center gap-2 rounded-md bg-gradient-to-r py-3 font-semibold hover:brightness-105 active:translate-y-px lg:w-auto lg:px-8"
          >
            <Sparkles className="h-4 w-4" aria-hidden="true" />
            Tìm ngày tốt
          </button>
        </form>

        {/* Results */}
        {!purpose ? (
          <EmptyState />
        ) : hits.length === 0 ? (
          <NoResultsState purpose={purpose} from={from} to={to} />
        ) : (
          <div className="mx-auto max-w-3xl">
            <h2 className="font-display text-ink-primary mb-4 text-xl font-semibold lg:text-2xl">
              {hits.length} ngày tốt cho{" "}
              <span className="text-brand-gold">{PURPOSE_LABELS[purpose]}</span>
              <span className="text-ink-muted ml-2 text-sm">
                ({from} → {to})
              </span>
            </h2>

            <ul className="space-y-3">
              {hits.map((h, i) => (
                <li
                  key={h.iso}
                  className={cn(
                    "border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/40 rounded-xl border p-4 transition lg:p-5",
                    i === 0 && "border-brand-gold/50 bg-bg-elevated/70"
                  )}
                >
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <Link
                        href={`/lich-am-duong?d=${h.iso}`}
                        className="hover:text-brand-gold flex items-baseline gap-2"
                      >
                        <span className="font-numeral text-ink-primary text-2xl">{h.solar}</span>
                        <span className="text-ink-muted text-sm">
                          ({DAY_OF_WEEK_VI[h.dayOfWeek]})
                        </span>
                      </Link>
                      <div className="text-ink-secondary mt-0.5 text-xs">{h.lunar}</div>
                      <div className="text-ink-muted mt-0.5 text-[11px]">Trực {h.truc}</div>
                    </div>
                    <div className="flex items-center gap-2">
                      {h.isHoangDaoDay ? (
                        <span className="rounded-full border border-emerald-500/40 bg-emerald-500/10 px-2 py-0.5 text-[10px] text-emerald-300">
                          Hoàng đạo
                        </span>
                      ) : (
                        <span className="rounded-full border border-rose-500/40 bg-rose-500/10 px-2 py-0.5 text-[10px] text-rose-300">
                          Hắc đạo
                        </span>
                      )}
                      {i === 0 ? (
                        <span className="bg-brand-gold/20 text-brand-gold rounded-full px-2 py-0.5 text-[10px] font-medium">
                          Tốt nhất
                        </span>
                      ) : null}
                    </div>
                  </div>

                  <div className="mt-3 flex flex-wrap gap-1.5">
                    {h.yiHits.map((y) => (
                      <span
                        key={y}
                        className="inline-flex items-center gap-1 rounded border border-emerald-500/30 bg-emerald-500/[0.04] px-2 py-0.5 text-[11px] text-emerald-200"
                      >
                        <CheckCircle2 className="h-3 w-3" aria-hidden="true" />
                        {y}
                      </span>
                    ))}
                    {h.jiBlockers.map((j) => (
                      <span
                        key={`block-${j}`}
                        className="inline-flex items-center gap-1 rounded border border-rose-500/30 bg-rose-500/[0.04] px-2 py-0.5 text-[11px] text-rose-200"
                      >
                        <AlertTriangle className="h-3 w-3" aria-hidden="true" />
                        Kiêng: {j}
                      </span>
                    ))}
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}

        <div className="border-brand-red/20 bg-brand-red/5 mx-auto mt-10 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> Xếp hạng dựa trên việc nên
            / kiêng theo cổ thư + ngày Hoàng đạo. Quyết định cuối cùng nên kết hợp với hợp tuổi cá
            nhân và tham khảo chuyên gia.
          </p>
        </div>

        <div className="mx-auto mt-6 max-w-3xl">
          <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" aria-hidden="true" />
            Về trang chủ
          </Link>
        </div>
      </div>
    </div>
  );
}

function EmptyState() {
  return (
    <div className="border-stroke-subtle bg-bg-elevated/30 mx-auto max-w-2xl rounded-2xl border p-8 text-center">
      <Calendar className="text-brand-gold mx-auto mb-3 h-10 w-10" aria-hidden="true" />
      <p className="text-ink-secondary text-sm">
        Chọn mục đích và khoảng thời gian ở trên để bắt đầu tìm ngày tốt.
      </p>
    </div>
  );
}

function NoResultsState({
  purpose,
  from,
  to,
}: {
  purpose: GoodDayPurpose;
  from: string;
  to: string;
}) {
  return (
    <div className="border-stroke-subtle bg-bg-elevated/30 mx-auto max-w-2xl rounded-2xl border p-8 text-center">
      <p className="text-ink-secondary text-sm">
        Không tìm thấy ngày tốt cho{" "}
        <span className="text-brand-gold">{PURPOSE_LABELS[purpose]}</span> trong khoảng {from} →{" "}
        {to}. Thử mở rộng khoảng thời gian hoặc đổi mục đích.
      </p>
    </div>
  );
}