import type { Metadata } from "next";
import Link from "next/link";
import { Search, Sparkles, BookOpen } from "lucide-react";

export const metadata: Metadata = {
  title: "Thư Viện AI — Tử Vi Số",
  description: "Cẩm nang tử vi và phong thuỷ — kiến thức cơ bản về 30+ chủ đề.",
};

const ARTICLES = [
  // Tử Vi
  {
    slug: "thien-can",
    cat: "Tử Vi",
    title: "10 Thiên Can là gì?",
    snippet:
      "Thiên Can là 10 ký hiệu Giáp, Ất, Bính, Đinh, Mậu, Kỷ, Canh, Tân, Nhâm, Quý — đại diện cho yếu tố trời và 5 cặp ngũ hành âm dương.",
  },
  {
    slug: "dia-chi",
    cat: "Tử Vi",
    title: "12 Địa Chi là gì?",
    snippet:
      "Địa Chi là 12 ký hiệu Tý, Sửu, Dần, Mão... đại diện 12 con giáp và 12 tháng. Kết hợp với Thiên Can tạo thành chu kỳ 60 hoa giáp.",
  },
  {
    slug: "ngu-hanh",
    cat: "Tử Vi",
    title: "Ngũ Hành — Kim Mộc Thuỷ Hoả Thổ",
    snippet:
      "Ngũ Hành là 5 yếu tố tương sinh tương khắc tạo nên vạn vật. Kim sinh Thuỷ, Thuỷ sinh Mộc, Mộc sinh Hoả, Hoả sinh Thổ, Thổ sinh Kim.",
  },
  {
    slug: "am-duong",
    cat: "Tử Vi",
    title: "Âm Dương — nguyên lý gốc",
    snippet:
      "Âm Dương là cặp đối lập nhưng bổ sung. Trong tử vi, mỗi can/chi/sao đều có thuộc tính âm hoặc dương.",
  },
  {
    slug: "tam-hop",
    cat: "Tử Vi",
    title: "Tam Hợp — 4 nhóm 3 con giáp",
    snippet:
      "Thân-Tý-Thìn, Tỵ-Dậu-Sửu, Dần-Ngọ-Tuất, Hợi-Mão-Mùi. Cùng nhóm tam hợp = tương đắc, hỗ trợ nhau.",
  },
  {
    slug: "luc-xung",
    cat: "Tử Vi",
    title: "Lục Xung — 6 cặp xung khắc",
    snippet:
      "Tý-Ngọ, Sửu-Mùi, Dần-Thân, Mão-Dậu, Thìn-Tuất, Tỵ-Hợi. Cặp xung khắc gây va chạm, cần dung hoà bằng người trung gian.",
  },
  {
    slug: "luc-hop",
    cat: "Tử Vi",
    title: "Lục Hợp — 6 cặp tương hợp",
    snippet: "Tý-Sửu, Dần-Hợi, Mão-Tuất, Thìn-Dậu, Tỵ-Thân, Ngọ-Mùi. Cặp đôi bù đắp năng lượng.",
  },
  {
    slug: "tu-tru",
    cat: "Tử Vi",
    title: "Tứ Trụ — Bát Tự là gì?",
    snippet:
      "Tứ Trụ là 4 trụ Năm-Tháng-Ngày-Giờ, mỗi trụ có 1 Can + 1 Chi = 8 chữ. Đây là phương pháp luận mệnh sâu hơn 12 con giáp.",
  },
  {
    slug: "lap-la-so",
    cat: "Tử Vi",
    title: "Cách lập Lá Số Tử Vi",
    snippet:
      "Cần 4 thông tin: ngày sinh âm lịch, giờ sinh, giới tính, năm sinh dương lịch. Lá số 12 cung an sao theo Bát Trạch và phái Tử Vi Đẩu Số.",
  },
  // Phong Thuỷ
  {
    slug: "bat-trach",
    cat: "Phong Thuỷ",
    title: "Bát Trạch — Đông Tứ Mệnh & Tây Tứ Mệnh",
    snippet:
      "Đông Tứ Mệnh: Khảm-Ly-Chấn-Tốn. Tây Tứ Mệnh: Càn-Khôn-Cấn-Đoài. Hợp hướng theo nhóm Cung Phi.",
  },
  {
    slug: "huong-nha",
    cat: "Phong Thuỷ",
    title: "Chọn hướng nhà",
    snippet:
      "Hướng nhà tính theo hướng cửa chính. Hợp khi trùng 1 trong 4 hướng tốt: Sinh Khí, Diên Niên, Thiên Y, Phục Vị.",
  },
  {
    slug: "phong-thuy-phong-ngu",
    cat: "Phong Thuỷ",
    title: "Phong thuỷ phòng ngủ",
    snippet:
      "Giường không kê dưới xà ngang, đầu giường không hướng cửa, gương không chiếu giường. Màu sắc theo Mệnh.",
  },
  {
    slug: "phong-thuy-bep",
    cat: "Phong Thuỷ",
    title: "Phong thuỷ bếp",
    snippet:
      "Bếp tránh đối diện cửa chính, không kê cạnh nhà vệ sinh, không đặt dưới xà. Hướng bếp ngược hướng cửa nhà thường tốt.",
  },
  {
    slug: "kim-lau",
    cat: "Phong Thuỷ",
    title: "Kim Lâu là gì?",
    snippet:
      "Tuổi Kim Lâu là tuổi mụ chia 9 dư 1, 3, 6, 8 — không nên xây nhà, cưới hỏi. Có 4 loại: Thê, Tử, Lục Súc, Thân.",
  },
  {
    slug: "hoang-oc",
    cat: "Phong Thuỷ",
    title: "Hoang Ốc",
    snippet:
      "Tuổi mụ chia 6 dư 3, 5, 0 phạm Hoang Ốc — Tam Địa Sát, Ngũ Thọ Tử, Lục Hoang Ốc. Không nên động thổ.",
  },
  {
    slug: "tam-tai",
    cat: "Phong Thuỷ",
    title: "Tam Tai — 3 năm hạn",
    snippet:
      "Mỗi nhóm tam hợp có 3 năm tam tai liên tiếp, lặp lại mỗi 12 năm. Trong tam tai nên hạn chế việc lớn.",
  },
  {
    slug: "vat-pham-phong-thuy",
    cat: "Phong Thuỷ",
    title: "Vật phẩm phong thuỷ phổ biến",
    snippet:
      "Tỳ Hưu, Cóc Tài Lộc, Kỳ Lân, Thiềm Thừ, Long Quy. Mỗi vật phẩm hợp với mục đích và hướng đặt khác nhau.",
  },
  {
    slug: "cay-phong-thuy",
    cat: "Phong Thuỷ",
    title: "Cây phong thuỷ trong nhà",
    snippet:
      "Kim Tiền (tài lộc), Phất Dụ (ổn định), Trầu Bà (lọc khí), Lưỡi Hổ (chống tà). Tránh cây có gai trong phòng ngủ.",
  },
  // Lịch
  {
    slug: "am-lich-duong-lich",
    cat: "Lịch",
    title: "Khác biệt Âm Lịch và Dương Lịch",
    snippet:
      "Dương lịch theo mặt trời, năm có 365.25 ngày. Âm lịch theo mặt trăng, có nhuận để đồng bộ. Tử vi truyền thống dùng âm lịch.",
  },
  {
    slug: "tiet-khi",
    cat: "Lịch",
    title: "24 Tiết Khí",
    snippet:
      "Lập Xuân, Vũ Thuỷ, Kinh Trập... 24 tiết khí chia năm thành các giai đoạn nông nghiệp. Tử vi Bát Tự dùng tiết khí thay cho tháng âm.",
  },
  {
    slug: "ngay-tot",
    cat: "Lịch",
    title: "Cách chọn ngày tốt",
    snippet:
      "Kết hợp Hoàng Đạo / Hắc Đạo, Trực, Sao 28, Cửu Tinh, Bát Tự gia chủ. Mỗi loại việc có tiêu chí khác nhau.",
  },
  // Thần Số
  {
    slug: "thuyet-pythagore",
    cat: "Thần Số Học",
    title: "Hệ Pythagore",
    snippet:
      "Phương pháp phương Tây cổ: A=1, B=2, ..., I=9, J=1... Tổng số ký tự rút gọn về 1-9 hoặc master 11/22/33.",
  },
  {
    slug: "so-chu-dao",
    cat: "Thần Số Học",
    title: "Số chủ đạo (Life Path)",
    snippet:
      "Cộng tất cả chữ số ngày-tháng-năm sinh, rút gọn về 1-9 hoặc 11/22/33. Là con số quan trọng nhất.",
  },
  {
    slug: "so-bieu-cam",
    cat: "Thần Số Học",
    title: "Số biểu cảm (Expression)",
    snippet:
      "Tổng giá trị các chữ cái trong tên đầy đủ. Phản ánh tài năng và cách thể hiện ra ngoài.",
  },
  // AI
  {
    slug: "ai-luan-giai",
    cat: "AI",
    title: '"Thầy" luận giải lá số như thế nào?',
    snippet:
      '"Thầy" nhận lá số đã an sao + câu hỏi của bạn, sinh phản hồi dựa trên kiến thức tử vi + ngữ cảnh sao chiếu cung.',
  },
  {
    slug: "ai-han-che",
    cat: "AI",
    title: 'Hạn chế của "Thầy"',
    snippet:
      '"Thầy" không thay thế thầy tử vi giàu kinh nghiệm ngoài đời. "Thầy" tốt cho gợi ý chung, không tốt cho dự báo cụ thể về tình duyên / sức khoẻ.',
  },
  // Khác
  {
    slug: "tu-vi-vs-tu-tru",
    cat: "Khác",
    title: "Khác biệt Tử Vi vs Tứ Trụ",
    snippet:
      "Tử Vi 12 cung — phái Trung Hoa cổ. Tứ Trụ Bát Tự — phái Đường Tống. Khác cách an sao và phương pháp luận giải.",
  },
  {
    slug: "tin-bao-nhieu",
    cat: "Khác",
    title: "Có nên tin tử vi 100% không?",
    snippet:
      "Tử vi là khoa học cổ về xác suất, không phải định mệnh tuyệt đối. Dùng làm tham khảo, không phải lời tiên tri.",
  },
  {
    slug: "duyen-am",
    cat: "Khác",
    title: "Duyên Âm là gì?",
    snippet:
      "Quan niệm dân gian về linh hồn vương vấn người sống. Phần lớn trường hợp giải thích được bằng tâm lý — cẩn trọng dịch vụ 'cắt duyên âm'.",
  },
];

type Props = { searchParams: Promise<{ q?: string; cat?: string }> };

export default async function LibraryPage({ searchParams }: Props) {
  const sp = await searchParams;
  const q = (sp.q ?? "").toLowerCase().trim();
  const cat = sp.cat ?? "";

  const filtered = ARTICLES.filter((a) => {
    if (cat && a.cat !== cat) return false;
    if (q && !`${a.title} ${a.snippet}`.toLowerCase().includes(q)) return false;
    return true;
  });

  const cats = Array.from(new Set(ARTICLES.map((a) => a.cat)));

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto max-w-4xl 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ư Viện AI
          </h1>
          <p className="text-ink-secondary mt-2 text-sm">
            Cẩm nang kiến thức tử vi, phong thuỷ, thần số học — {ARTICLES.length} chủ đề.
          </p>
        </div>

        <form
          method="GET"
          className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-xl border p-4"
        >
          <div className="relative">
            <Search className="text-ink-muted absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
            <input
              name="q"
              defaultValue={q}
              placeholder="Tìm bài viết..."
              className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold w-full rounded-md border py-2.5 pr-3 pl-9 text-sm focus:outline-none"
            />
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            <Link
              href="/thu-vien-ai"
              className={`border-stroke-subtle rounded-full border px-3 py-1.5 text-xs ${
                cat === ""
                  ? "border-brand-gold bg-brand-gold/10 text-brand-gold"
                  : "text-ink-secondary hover:border-brand-gold/50"
              }`}
            >
              Tất cả
            </Link>
            {cats.map((c) => (
              <Link
                key={c}
                href={`/thu-vien-ai?cat=${encodeURIComponent(c)}`}
                className={`border-stroke-subtle rounded-full border px-3 py-1.5 text-xs ${
                  cat === c
                    ? "border-brand-gold bg-brand-gold/10 text-brand-gold"
                    : "text-ink-secondary hover:border-brand-gold/50"
                }`}
              >
                {c}
              </Link>
            ))}
          </div>
        </form>

        {q || cat ? (
          <div className="text-ink-muted mb-3 text-xs">
            {filtered.length} bài viết khớp{q ? ` với "${q}"` : ""}
            {cat ? ` · danh mục ${cat}` : ""}
          </div>
        ) : null}

        <div className="grid gap-3 lg:grid-cols-2">
          {filtered.map((a) => (
            <article
              key={a.slug}
              className="border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/50 group rounded-xl border p-5 transition"
            >
              <div className="text-brand-gold mb-2 flex items-center gap-2 text-xs">
                <BookOpen className="h-3.5 w-3.5" />
                <span className="tracking-wider uppercase">{a.cat}</span>
              </div>
              <h3 className="font-display text-ink-primary group-hover:text-brand-gold text-lg font-semibold">
                {a.title}
              </h3>
              <p className="text-ink-secondary mt-2 text-sm leading-relaxed">{a.snippet}</p>
            </article>
          ))}
          {filtered.length === 0 ? (
            <div className="border-stroke-subtle text-ink-muted col-span-2 rounded-xl border border-dashed p-8 text-center text-sm">
              Không có bài nào khớp. Thử từ khoá khác.
            </div>
          ) : null}
        </div>

        <div className="border-stroke-subtle bg-bg-elevated/40 mt-8 rounded-2xl border p-6 text-center">
          <Sparkles className="text-brand-gold mx-auto h-6 w-6" />
          <h3 className="font-display text-ink-primary mt-2 text-lg font-semibold">
            Hỏi &ldquo;Thầy&rdquo; luận giải sâu hơn
          </h3>
          <p className="text-ink-secondary mt-1 text-sm">
            Cẩm nang chỉ giải thích kiến thức cơ bản. Để xem &ldquo;Thầy&rdquo; luận giải lá số
            riêng của bạn:
          </p>
          <Link
            href="/van-menh"
            className="bg-brand-gold text-bg-base mt-3 inline-block rounded-md px-5 py-2 text-sm font-semibold"
          >
            Vào Vận Mệnh &ldquo;Thầy&rdquo; →
          </Link>
        </div>
      </div>
    </div>
  );
}