import type { Metadata } from "next";
import {
  lifePath,
  expressionNumber,
  soulUrge,
  personalityNumber,
  birthdayNumber,
  maturityNumber,
  personalYear,
  PERSONAL_YEAR_GUIDE,
  NUMBER_MEANINGS,
} from "@/lib/numerology";
import { AiInsightPanel } from "@/components/ai/insight-panel";
import { DateInput } from "@/components/ui/date-input";

export const metadata: Metadata = {
  title: "Thần Số Học — Tử Vi Số",
  description: "Tính số chủ đạo, số biểu cảm, số linh hồn theo hệ Pythagore.",
};

type Props = { searchParams: Promise<{ name?: string; date?: string }> };

export default async function NumerologyPage({ searchParams }: Props) {
  const sp = await searchParams;
  const name = (sp.name ?? "").trim();
  const date = sp.date ?? "";
  const d = date ? new Date(date) : null;
  const valid = name.length > 1 && d && !isNaN(d.getTime());

  const result = valid
    ? {
        lifePath: lifePath(d!.getFullYear(), d!.getMonth() + 1, d!.getDate()),
        expression: expressionNumber(name),
        soul: soulUrge(name),
        personality: personalityNumber(name),
        birthday: birthdayNumber(d!.getDate()),
      }
    : null;

  const currentYear = new Date().getFullYear();
  const extras =
    result && d
      ? {
          maturity: maturityNumber(result.lifePath, result.expression),
          personalYear: personalYear(d.getMonth() + 1, d.getDate(), currentYear),
          nextPersonalYear: personalYear(d.getMonth() + 1, d.getDate(), currentYear + 1),
        }
      : null;

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-3xl px-4 py-8 lg:py-12">
        <div className="mb-8 text-center">
          <h1 className="font-display text-ink-primary text-3xl font-semibold lg:text-4xl">
            Thần Số Học
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            Khám phá ba con số quan trọng nhất từ tên và ngày sinh — hệ Pythagore.
          </p>
        </div>

        <form
          method="GET"
          className="border-stroke-subtle bg-bg-elevated/40 mb-8 grid gap-4 rounded-xl border p-5 lg:grid-cols-2"
        >
          <div>
            <label className="text-ink-muted block text-xs">Họ tên đầy đủ</label>
            <input
              name="name"
              defaultValue={name}
              placeholder="Nguyễn Văn A"
              required
              className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
            />
          </div>
          <div>
            <label className="text-ink-muted block text-xs">Ngày sinh dương lịch</label>
            <div className="mt-1">
              <DateInput name="date" defaultValue={date} required />
            </div>
          </div>
          <button
            type="submit"
            className="bg-brand-gold text-bg-base rounded-md px-4 py-2.5 text-sm font-semibold lg:col-span-2"
          >
            Phân tích
          </button>
        </form>

        {result ? (
          <div className="space-y-4">
            <NumberCard title="Số chủ đạo (Life Path)" value={result.lifePath} variant="primary" />
            <NumberCard
              title="Số biểu cảm (Expression)"
              value={result.expression}
              variant="secondary"
            />
            <NumberCard title="Số linh hồn (Soul Urge)" value={result.soul} variant="secondary" />
            <NumberCard
              title="Số nhân cách (Personality)"
              value={result.personality}
              variant="secondary"
            />
            <NumberCard
              title="Số ngày sinh (Birthday)"
              value={result.birthday}
              variant="secondary"
            />
            {extras ? (
              <NumberCard
                title="Số trưởng thành (Maturity)"
                value={extras.maturity}
                variant="secondary"
              />
            ) : null}
          </div>
        ) : null}

        {extras ? (
          <article className="border-stroke-subtle bg-bg-elevated/40 mt-6 rounded-2xl border p-6 lg:p-8">
            <div className="text-brand-gold text-xs tracking-[0.2em] uppercase">
              Chu kỳ năm cá nhân
            </div>
            <div className="mt-4 grid gap-3 lg:grid-cols-2">
              <PersonalYearCard year={currentYear} value={extras.personalYear} highlight />
              <PersonalYearCard year={currentYear + 1} value={extras.nextPersonalYear} />
            </div>
            <p className="text-ink-muted mt-3 text-xs leading-relaxed">
              Số chu kỳ năm tính bằng tháng + ngày sinh + năm dương lịch hiện tại. Dùng để biết tinh
              thần của năm với riêng bạn — khác với tử vi năm chung của tuổi.
            </p>
          </article>
        ) : null}

        {result ? (
          <AiInsightPanel
            topic="numerology"
            context={{
              name,
              date,
              lifePath: result.lifePath,
              expression: result.expression,
              soul: result.soul,
              personality: result.personality,
              birthday: result.birthday,
              maturity: extras?.maturity,
              personalYear: extras?.personalYear,
              nextPersonalYear: extras?.nextPersonalYear,
              calendarYear: currentYear,
              meanings: {
                lifePath: NUMBER_MEANINGS[result.lifePath]?.title,
                expression: NUMBER_MEANINGS[result.expression]?.title,
                soul: NUMBER_MEANINGS[result.soul]?.title,
                personality: NUMBER_MEANINGS[result.personality]?.title,
                birthday: NUMBER_MEANINGS[result.birthday]?.title,
                maturity: extras ? NUMBER_MEANINGS[extras.maturity]?.title : undefined,
              },
              personalYearTheme: extras
                ? PERSONAL_YEAR_GUIDE[extras.personalYear]?.theme
                : undefined,
            }}
            cta={'Hỏi "Thầy" luận sâu thần số học'}
            title="Luận sâu Thần Số Học"
            hint='Phần trên là 6 số cốt lõi + 2 năm cá nhân. "Thầy" sẽ phân tích sự cộng hưởng và bài học cuộc đời mà tổ hợp này gợi ý.'
          />
        ) : null}
      </div>
    </div>
  );
}

function NumberCard({
  title,
  value,
  variant,
}: {
  title: string;
  value: number;
  variant: "primary" | "secondary";
}) {
  const meaning = NUMBER_MEANINGS[value];
  return (
    <article
      className={`border-stroke-subtle bg-bg-elevated/40 rounded-2xl border p-5 lg:p-6 ${
        variant === "primary" ? "border-brand-gold/40" : ""
      }`}
    >
      <div className="flex items-start gap-5">
        <div
          className={`flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl text-4xl font-bold ${
            variant === "primary"
              ? "bg-brand-gold text-bg-base"
              : "bg-bg-inset text-brand-gold border-brand-gold/30 border"
          } font-display`}
        >
          {value}
        </div>
        <div className="min-w-0 flex-1">
          <div className="text-brand-gold text-xs tracking-[0.2em] uppercase">{title}</div>
          <h3 className="font-display text-ink-primary mt-1 text-xl font-semibold">
            {meaning?.title ?? `Số ${value}`}
          </h3>
          <p className="text-ink-secondary mt-2 text-sm leading-relaxed">
            {meaning?.desc ?? "Chưa có dữ liệu cho con số này."}
          </p>
        </div>
      </div>
    </article>
  );
}

function PersonalYearCard({
  year,
  value,
  highlight,
}: {
  year: number;
  value: number;
  highlight?: boolean;
}) {
  const guide = PERSONAL_YEAR_GUIDE[value];
  return (
    <div
      className={`rounded-lg border p-4 ${
        highlight ? "border-brand-gold bg-brand-gold/5" : "border-stroke-subtle bg-bg-inset"
      }`}
    >
      <div className="flex items-baseline justify-between">
        <div className="text-ink-muted text-[11px] tracking-wider uppercase">
          {highlight ? `Năm hiện tại · ${year}` : `Năm tới · ${year}`}
        </div>
        <div
          className={`font-display text-3xl font-bold ${
            highlight ? "text-brand-gold" : "text-ink-primary"
          }`}
        >
          {value}
        </div>
      </div>
      {guide ? (
        <>
          <div className="font-display text-ink-primary mt-2 text-base font-semibold">
            {guide.theme}
          </div>
          <p className="text-ink-secondary mt-2 text-xs leading-relaxed">{guide.advice}</p>
        </>
      ) : (
        <p className="text-ink-muted mt-2 text-xs">Số {value} — master year, vibration cao.</p>
      )}
    </div>
  );
}