import Link from "next/link";
import { listPosts } from "@/lib/cms";
import { HeaderV2 } from "@/components/v2/header-v2";
import { FooterV2 } from "@/components/v2/footer-v2";
import { PostCardV2 } from "@/components/v2/post-card-v2";

const CAT_IDS = {
  tinNong: 148,
  phanTich: 36,
  crypto: 37,
  vang: 252,
  chungKhoan: 40,
  forex: 39,
};

/**
 * V2 "Magazine" Homepage:
 *   1. Full-bleed cinematic hero (no sidebar)
 *   2. Editorial 4-up grid of secondary stories
 *   3. Asymmetric mosaic — 1 tall feature + 3 mosaic-wide cards
 *   4. Quote/text-only band (typography moment)
 *   5. Crypto / Vàng / Chứng khoán mixed mosaic
 *   6. Big CTA newsletter band lives in FooterV2
 */
export default async function HomePageV2() {
  const [
    { posts: featuredPosts },
    { posts: secondaryRaw },
    { posts: tinNong },
    { posts: phanTich },
    { posts: crypto },
    { posts: vang },
    { posts: chungKhoan },
  ] = await Promise.all([
    listPosts({ perPage: 1, featured: true, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 8, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 4, categories: [CAT_IDS.tinNong] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.phanTich] }),
    listPosts({ perPage: 3, categories: [CAT_IDS.crypto] }),
    listPosts({ perPage: 3, categories: [CAT_IDS.vang] }),
    listPosts({ perPage: 3, categories: [CAT_IDS.chungKhoan] }),
  ]);

  const heroPost = featuredPosts[0] ?? secondaryRaw[0] ?? null;
  const heroId = heroPost?.id;
  const usedIds = new Set<number | string>();
  if (heroId !== undefined) usedIds.add(heroId);

  const editorial = secondaryRaw
    .filter((p) => !usedIds.has(p.id))
    .slice(0, 4);
  editorial.forEach((p) => usedIds.add(p.id));

  // For the mosaic section: 1 tall feature from phanTich (column 1), then mosaic-wide rows (column 2)
  const mosaicTall = phanTich[0];
  const mosaicSide = phanTich.slice(1, 4);

  // Quote band: pick the first post from tinNong with an excerpt for typographic moment
  const quoteCandidate =
    tinNong.find((p) => p.excerpt && p.excerpt.length > 30) ??
    secondaryRaw.find((p) => p.excerpt && p.excerpt.length > 30) ??
    null;

  // Mixed mosaic — 1 mosaic-tall + 5 cards across categories
  const mixed = [...crypto.slice(0, 2), ...chungKhoan.slice(0, 2), ...vang.slice(0, 2)].filter(
    (p) => !usedIds.has(p.id),
  );
  const mosaicHero = mixed[0];
  const mosaicCards = mixed.slice(1, 6);

  return (
    <>
      <HeaderV2 />
      <main id="main">
        {/* HERO — full-bleed cinema */}
        {heroPost && (
          <section style={{ background: "var(--paper)" }}>
            <PostCardV2 post={heroPost} variant="feature" priority asPageHeading />
          </section>
        )}

        {/* EDITORIAL ROW — 4-up grid */}
        {editorial.length > 0 && (
          <section
            className="border-t hairline"
            style={{ background: "var(--paper)" }}
          >
            <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-16 lg:py-20">
              <div className="flex items-end justify-between mb-10 lg:mb-14">
                <div>
                  <div
                    className="text-[10px] uppercase tracking-[0.3em] font-semibold mb-3"
                    style={{ color: "var(--accent)" }}
                  >
                    Số ra hôm nay
                  </div>
                  <h2
                    className="font-[family-name:var(--font-fraunces)] tracking-tight"
                    style={{
                      fontSize: "clamp(32px, 4vw, 52px)",
                      fontWeight: 500,
                      color: "var(--ink)",
                      fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
                    }}
                  >
                    Đáng đọc tuần này
                  </h2>
                </div>
                <Link
                  href="/category/tin-nong"
                  className="hidden sm:inline-flex items-center gap-2 text-[13px] font-semibold hover:gap-3 transition-all"
                  style={{ color: "var(--accent)" }}
                >
                  Tất cả tin <span aria-hidden>→</span>
                </Link>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12">
                {editorial.map((p) => (
                  <PostCardV2 key={p.id} post={p} variant="card" />
                ))}
              </div>
            </div>
          </section>
        )}

        {/* MOSAIC — Phân tích chuyên sâu */}
        {mosaicTall && mosaicSide.length > 0 && (
          <section
            className="border-t hairline"
            style={{ background: "var(--bg)" }}
          >
            <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-16 lg:py-20">
              <div className="flex items-end justify-between mb-10 lg:mb-14">
                <div>
                  <div
                    className="text-[10px] uppercase tracking-[0.3em] font-semibold mb-3"
                    style={{ color: "var(--accent)" }}
                  >
                    Long-read
                  </div>
                  <h2
                    className="font-[family-name:var(--font-fraunces)] italic tracking-tight"
                    style={{
                      fontSize: "clamp(32px, 4vw, 52px)",
                      fontWeight: 500,
                      color: "var(--ink)",
                      fontStyle: "italic",
                      fontVariationSettings: "'opsz' 144, 'SOFT' 50",
                    }}
                  >
                    Phân tích chuyên sâu
                  </h2>
                </div>
                <Link
                  href="/category/phan-tich"
                  className="hidden sm:inline-flex items-center gap-2 text-[13px] font-semibold hover:gap-3 transition-all"
                  style={{ color: "var(--accent)" }}
                >
                  Đọc thêm <span aria-hidden>→</span>
                </Link>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
                <div className="lg:col-span-7">
                  <PostCardV2 post={mosaicTall} variant="mosaic-tall" />
                </div>
                <div className="lg:col-span-5 space-y-8">
                  {mosaicSide.map((p) => (
                    <PostCardV2 key={p.id} post={p} variant="mosaic-wide" />
                  ))}
                </div>
              </div>
            </div>
          </section>
        )}

        {/* QUOTE BAND — typographic moment */}
        {quoteCandidate && (
          <section
            className="border-t hairline"
            style={{ background: "var(--paper)" }}
          >
            <div className="mx-auto max-w-4xl px-6 lg:px-10 py-20 lg:py-28 text-center">
              <div
                className="text-[10px] uppercase tracking-[0.3em] font-semibold mb-6"
                style={{ color: "var(--accent)" }}
              >
                Trích đoạn
              </div>
              <blockquote
                className="font-[family-name:var(--font-fraunces)] italic mb-8 leading-[1.15]"
                style={{
                  fontSize: "clamp(28px, 4vw, 52px)",
                  fontWeight: 500,
                  fontStyle: "italic",
                  color: "var(--ink)",
                  fontVariationSettings: "'opsz' 144, 'SOFT' 50",
                }}
              >
                <span style={{ color: "var(--accent)", marginRight: 4 }}>“</span>
                {quoteCandidate.excerpt?.slice(0, 220).replace(/\s+\S*$/, "")}…
                <span style={{ color: "var(--accent)", marginLeft: 4 }}>”</span>
              </blockquote>
              <Link
                href={`/${quoteCandidate.slug}`}
                className="inline-flex items-center gap-2 text-[13px] uppercase tracking-[0.2em] font-semibold border-b-2 pb-1 hover:text-[var(--accent)] transition-colors"
                style={{
                  color: "var(--ink-2)",
                  borderColor: "var(--ink-2)",
                }}
              >
                Đọc bài đầy đủ <span aria-hidden>→</span>
              </Link>
            </div>
          </section>
        )}

        {/* MIXED MOSAIC — Crypto + CK + Vàng */}
        {mosaicHero && mosaicCards.length > 0 && (
          <section
            className="border-t hairline"
            style={{ background: "var(--bg)" }}
          >
            <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-16 lg:py-20">
              <div className="flex items-end justify-between mb-10 lg:mb-14">
                <div>
                  <div
                    className="text-[10px] uppercase tracking-[0.3em] font-semibold mb-3"
                    style={{ color: "var(--accent)" }}
                  >
                    Thị trường
                  </div>
                  <h2
                    className="font-[family-name:var(--font-fraunces)] tracking-tight"
                    style={{
                      fontSize: "clamp(32px, 4vw, 52px)",
                      fontWeight: 500,
                      color: "var(--ink)",
                      fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
                    }}
                  >
                    Mọi mặt thị trường
                  </h2>
                </div>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12">
                <div className="lg:col-span-5">
                  <PostCardV2 post={mosaicHero} variant="mosaic-tall" />
                </div>
                <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-10">
                  {mosaicCards.map((p) => (
                    <PostCardV2 key={p.id} post={p} variant="card" />
                  ))}
                </div>
              </div>
            </div>
          </section>
        )}

        {/* TIN NÓNG — text-only editorial moment */}
        {tinNong.length >= 2 && (
          <section
            className="border-t hairline"
            style={{ background: "var(--paper)" }}
          >
            <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-16 lg:py-20">
              <div className="mb-10 lg:mb-14">
                <div
                  className="text-[10px] uppercase tracking-[0.3em] font-semibold mb-3"
                  style={{ color: "var(--accent)" }}
                >
                  Live
                </div>
                <h2
                  className="font-[family-name:var(--font-fraunces)] italic tracking-tight"
                  style={{
                    fontSize: "clamp(32px, 4vw, 52px)",
                    fontWeight: 500,
                    color: "var(--ink)",
                    fontStyle: "italic",
                    fontVariationSettings: "'opsz' 144, 'SOFT' 50",
                  }}
                >
                  Tin nóng đang chạy
                </h2>
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-12">
                {tinNong.slice(0, 4).map((p) => (
                  <PostCardV2 key={p.id} post={p} variant="text-only" />
                ))}
              </div>
              <div className="mt-12 text-center">
                <Link
                  href="/category/tin-nong"
                  className="inline-flex items-center gap-2 text-[13px] uppercase tracking-[0.2em] font-semibold border-b-2 pb-1 hover:text-[var(--accent)] transition-colors"
                  style={{
                    color: "var(--ink-2)",
                    borderColor: "var(--ink-2)",
                  }}
                >
                  Tất cả tin nóng <span aria-hidden>→</span>
                </Link>
              </div>
            </div>
          </section>
        )}
      </main>
      <FooterV2 />
    </>
  );
}