import type { Metadata } from "next";
import Link from "next/link";
import { Heart, Briefcase, Coins, Activity, Sparkles } from "lucide-react";
import {
  WESTERN,
  westernBySlug,
  westernFromDate,
  westernCompat,
  westernMatches,
  westernDomainHint,
  type WesternSign,
} from "@/lib/western-zodiac";
import { DateInput } from "@/components/ui/date-input";
import { AiInsightPanel } from "@/components/ai/insight-panel";

export const metadata: Metadata = {
  title: "Cung Hoàng Đạo — Tử Vi Số",
  description:
    "12 cung hoàng đạo theo dương lịch — tính cách, tình yêu, sự nghiệp, tài chính, sức khoẻ + so hợp với 12 cung khác.",
};

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

export default async function WesternZodiacPage({ searchParams }: Props) {
  const sp = await searchParams;
  let fromDate = null;
  if (sp.date) {
    const d = new Date(sp.date);
    if (!isNaN(d.getTime())) fromDate = westernFromDate(d.getMonth() + 1, d.getDate());
  }
  const selected = sp.slug ? westernBySlug(sp.slug) : fromDate;
  const partnerSign = sp.partner ? westernBySlug(sp.partner) : null;

  const compat =
    selected && partnerSign
      ? westernCompat(selected.slug as WesternSign, partnerSign.slug as WesternSign)
      : null;
  const matches = selected ? westernMatches(selected.slug as WesternSign) : null;
  const domain = selected ? westernDomainHint(selected.slug as WesternSign) : null;

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-5xl 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">
            Cung Hoàng Đạo
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            12 cung phương Tây — tính cách, sự nghiệp, tình yêu, sức khoẻ + so hợp.
          </p>
        </div>

        <form
          method="GET"
          className="border-stroke-subtle bg-bg-elevated/40 mx-auto mb-8 grid max-w-md gap-3 rounded-xl border p-4 lg:grid-cols-2"
        >
          <div className="lg:col-span-2">
            <label className="text-ink-muted block text-xs">Ngày sinh dương lịch</label>
            <div className="mt-1">
              <DateInput name="date" defaultValue={sp.date ?? ""} />
            </div>
          </div>
          <button
            type="submit"
            className="bg-brand-gold text-bg-base rounded-md px-4 py-2 text-sm font-semibold lg:col-span-2"
          >
            Tra
          </button>
        </form>

        <div className="mb-10 grid grid-cols-3 gap-2 sm:grid-cols-4 lg:grid-cols-6 lg:gap-3">
          {WESTERN.map((w) => (
            <Link
              key={w.slug}
              href={`/cung-hoang-dao?slug=${w.slug}`}
              className={`border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/60 flex flex-col items-center gap-1 rounded-lg border p-3 text-center transition ${
                selected?.slug === w.slug ? "border-brand-gold bg-bg-elevated" : ""
              }`}
            >
              <div className="text-2xl">{w.symbol}</div>
              <div className="font-display text-ink-primary text-sm font-semibold">{w.name}</div>
              <div className="text-ink-muted text-[10px]">
                {w.start.day}/{w.start.month} – {w.end.day}/{w.end.month}
              </div>
            </Link>
          ))}
        </div>

        {selected ? (
          <>
            <article className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-2xl border p-6 lg:p-8">
              <div className="border-stroke-subtle flex items-center gap-4 border-b pb-4">
                <div className="text-5xl">{selected.symbol}</div>
                <div>
                  <div className="text-brand-gold text-xs tracking-[0.2em] uppercase">
                    {selected.english} · {selected.element} · {selected.modality}
                  </div>
                  <h2 className="font-display text-ink-primary mt-0.5 text-3xl font-semibold lg:text-4xl">
                    {selected.name}
                  </h2>
                  <p className="text-ink-muted mt-1 text-xs">
                    Sao chiếu: {selected.ruler} · {selected.start.day}/{selected.start.month} –{" "}
                    {selected.end.day}/{selected.end.month}
                  </p>
                </div>
              </div>

              <p className="text-ink-secondary mt-4 text-base leading-relaxed">
                {selected.description}
              </p>

              <div className="mt-6 grid gap-6 lg:grid-cols-2">
                <Section title="Tính cách">
                  <p className="text-ink-secondary text-sm">{selected.traits.join(" · ")}</p>
                </Section>
                <Section title="Tình yêu">
                  <p className="text-ink-secondary text-sm leading-relaxed">{selected.loveHint}</p>
                </Section>
                <Section title="Điểm mạnh">
                  <ul className="text-ink-secondary list-disc space-y-1 pl-5 text-sm">
                    {selected.strengths.map((s, i) => (
                      <li key={i}>{s}</li>
                    ))}
                  </ul>
                </Section>
                <Section title="Điểm yếu">
                  <ul className="text-ink-secondary list-disc space-y-1 pl-5 text-sm">
                    {selected.weaknesses.map((s, i) => (
                      <li key={i}>{s}</li>
                    ))}
                  </ul>
                </Section>
              </div>
            </article>

            {domain ? (
              <article className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-2xl border p-6 lg:p-8">
                <div className="text-brand-gold flex items-center gap-2 text-xs tracking-[0.2em] uppercase">
                  <Sparkles className="h-3.5 w-3.5" />
                  Sự nghiệp · Tài chính · Sức khoẻ (theo {selected.element})
                </div>
                <div className="mt-4 grid gap-3 lg:grid-cols-3">
                  <DomainCard
                    icon={<Briefcase className="h-4 w-4" />}
                    title="Sự nghiệp"
                    body={domain.career}
                  />
                  <DomainCard
                    icon={<Coins className="h-4 w-4" />}
                    title="Tài chính"
                    body={domain.finance}
                  />
                  <DomainCard
                    icon={<Activity className="h-4 w-4" />}
                    title="Sức khoẻ"
                    body={domain.health}
                  />
                </div>
              </article>
            ) : null}

            {matches ? (
              <article className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-2xl border p-6 lg:p-8">
                <div className="text-brand-gold flex items-center gap-2 text-xs tracking-[0.2em] uppercase">
                  <Heart className="h-3.5 w-3.5" />
                  Hợp tuổi với 12 cung khác
                </div>
                <div className="mt-4 grid gap-4 lg:grid-cols-2">
                  <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-4">
                    <div className="text-[11px] tracking-wider text-emerald-300 uppercase">
                      4 cung hợp nhất
                    </div>
                    <div className="mt-3 grid gap-2">
                      {matches.best.map((m) => (
                        <Link
                          key={m.slug}
                          href={`/cung-hoang-dao?slug=${selected.slug}&partner=${m.slug}`}
                          className="-mx-2 flex items-center justify-between rounded px-2 py-1.5 hover:bg-emerald-500/10"
                        >
                          <div className="flex items-center gap-2">
                            <span className="text-2xl">{m.symbol}</span>
                            <span className="text-ink-primary text-sm">{m.name}</span>
                          </div>
                          <span className="font-mono text-sm text-emerald-300">{m.score}</span>
                        </Link>
                      ))}
                    </div>
                  </div>
                  <div className="rounded-lg border border-rose-500/30 bg-rose-500/5 p-4">
                    <div className="text-[11px] tracking-wider text-rose-300 uppercase">
                      4 cung kém hợp
                    </div>
                    <div className="mt-3 grid gap-2">
                      {matches.worst.map((m) => (
                        <Link
                          key={m.slug}
                          href={`/cung-hoang-dao?slug=${selected.slug}&partner=${m.slug}`}
                          className="-mx-2 flex items-center justify-between rounded px-2 py-1.5 hover:bg-rose-500/10"
                        >
                          <div className="flex items-center gap-2">
                            <span className="text-2xl">{m.symbol}</span>
                            <span className="text-ink-primary text-sm">{m.name}</span>
                          </div>
                          <span className="font-mono text-sm text-rose-300">{m.score}</span>
                        </Link>
                      ))}
                    </div>
                  </div>
                </div>
                <p className="text-ink-muted mt-3 text-xs">
                  Click vào tên cung để xem phân tích chi tiết cặp đôi.
                </p>
              </article>
            ) : null}

            {compat ? (
              <article className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-2xl border p-6 lg:p-8">
                <header className="border-stroke-subtle border-b pb-4">
                  <div className="flex items-baseline justify-between">
                    <div>
                      <div className="text-brand-gold flex items-center gap-2 text-xs tracking-[0.2em] uppercase">
                        <Heart className="h-3.5 w-3.5" />
                        {compat.selfName} ↔ {compat.partnerName}
                      </div>
                      <h3
                        className={`font-display mt-1 text-2xl font-semibold ${
                          compat.totalScore >= 60
                            ? "text-emerald-400"
                            : compat.totalScore >= 45
                              ? "text-amber-400"
                              : "text-rose-400"
                        }`}
                      >
                        {compat.rating}
                      </h3>
                    </div>
                    <div className="font-display text-brand-gold text-4xl font-bold lg:text-5xl">
                      {compat.totalScore}
                      <span className="text-ink-muted text-sm">/100</span>
                    </div>
                  </div>
                </header>
                <div className="mt-4 grid gap-2 lg:grid-cols-2">
                  <div className="text-ink-secondary text-xs">
                    Element score:{" "}
                    <span className="text-ink-primary font-mono">{compat.elementScore}</span>
                  </div>
                  <div className="text-ink-secondary text-xs">
                    Modality score:{" "}
                    <span className="text-ink-primary font-mono">{compat.modalityScore}</span>
                  </div>
                </div>
                <div className="mt-4 space-y-2">
                  {compat.notes.map((n, i) => (
                    <p key={i} className="text-ink-secondary text-sm leading-relaxed">
                      · {n}
                    </p>
                  ))}
                </div>
              </article>
            ) : null}

            <AiInsightPanel
              topic="numerology"
              context={{
                tool: "western-zodiac",
                sign: selected.name,
                english: selected.english,
                element: selected.element,
                modality: selected.modality,
                ruler: selected.ruler,
                traits: selected.traits,
                strengths: selected.strengths,
                weaknesses: selected.weaknesses,
                career: domain?.career,
                finance: domain?.finance,
                health: domain?.health,
                bestMatches: matches?.best.map((m) => m.name),
                worstMatches: matches?.worst.map((m) => m.name),
                partnerName: compat?.partnerName,
                compatScore: compat?.totalScore,
                compatRating: compat?.rating,
              }}
              cta={'Hỏi "Thầy"'}
              title="Luận giải sâu cung hoàng đạo"
              hint='"Thầy" sẽ tổng hợp tính cách + nguyên tố + sao chiếu + so hợp để đưa ra lời khuyên cá nhân hoá.'
            />
          </>
        ) : null}
      </div>
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section>
      <h3 className="font-display text-brand-gold mb-2 text-sm font-semibold tracking-wider uppercase">
        {title}
      </h3>
      {children}
    </section>
  );
}

function DomainCard({ icon, title, body }: { icon: React.ReactNode; title: string; body: string }) {
  return (
    <div className="border-stroke-subtle/60 bg-bg-inset rounded-lg border p-4">
      <div className="text-brand-gold flex items-center gap-1.5 text-[11px] tracking-wider uppercase">
        {icon}
        {title}
      </div>
      <p className="text-ink-secondary mt-2 text-xs leading-relaxed">{body}</p>
    </div>
  );
}