import Link from "next/link";
import Image from "next/image";
import { listPosts } from "@/lib/cms";
import { PreviewBar } from "../_bar";

export const metadata = { title: "Mockup C · Swiss Grid Newsroom · Preview" };
export const dynamic = "force-dynamic";

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

/**
 * MOCKUP C — Swiss Grid Newsroom.
 * FT / Reuters reimagined. Sans-only (no serif), strict 12-col grid,
 * dense rows, hairlines everywhere, eyebrow uppercase mono, tiny
 * thumbnails. Reads like a working desk's morning briefing.
 */
export default async function MockupCPage() {
  const [
    { posts: feat },
    { posts: latest },
    { posts: phanTich },
    { posts: tinNong },
    { posts: crypto },
    { posts: chungKhoan },
    { posts: vang },
  ] = await Promise.all([
    listPosts({ perPage: 1, featured: true, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 12, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 5, categories: [CAT_IDS.phanTich] }),
    listPosts({ perPage: 8, categories: [CAT_IDS.tinNong] }),
    listPosts({ perPage: 5, categories: [CAT_IDS.crypto] }),
    listPosts({ perPage: 5, categories: [CAT_IDS.chungKhoan] }),
    listPosts({ perPage: 5, categories: [CAT_IDS.vang] }),
  ]);

  const heroPost = feat[0] ?? latest[0];
  const used = new Set<string | number>();
  if (heroPost) used.add(heroPost.id);
  const sub = latest.filter((p) => !used.has(p.id)).slice(0, 6);
  sub.forEach((p) => used.add(p.id));
  const lr = phanTich[0];
  if (lr) used.add(lr.id);
  const lrSide = phanTich.slice(1, 5);

  const SANS = "var(--font-manrope)";
  const NUM = "var(--font-jetbrains-mono)";
  const BG = "#F0EDE6";
  const PAPER = "#FFFFFF";
  const INK = "#0E1116";
  const INK2 = "#3D434C";
  const INK3 = "#7B8290";
  const LINE = "#D5D2C8";
  const ACCENT = "#C73E1D";

  return (
    <div style={{ background: BG, color: INK, minHeight: "100vh", fontFamily: SANS }}>
      <PreviewBar active="c" />

      {/* Top utility strip */}
      <div className="border-b" style={{ borderColor: LINE, background: PAPER }}>
        <div className="mx-auto max-w-[1400px] px-6 lg:px-10">
          <div className="flex items-center justify-between py-2 text-[11px]" style={{ color: INK3, fontFamily: NUM }}>
            <span className="uppercase tracking-[0.2em]">{new Date().toLocaleDateString("vi-VN",{weekday:"long",day:"2-digit",month:"long",year:"numeric"})}</span>
            <span className="hidden md:flex items-center gap-4 uppercase tracking-[0.2em]">
              <span>VN-Index <span style={{ color: "#1B7A3D" }}>+0.42%</span></span>
              <span>BTC <span style={{ color: "#C73E1D" }}>−1.24%</span></span>
              <span>USD/VND 25,420</span>
              <span>Vàng SJC 76.4M</span>
            </span>
            <span className="uppercase tracking-[0.2em]">vi-VN</span>
          </div>
        </div>
      </div>

      {/* Masthead */}
      <header className="border-b" style={{ background: PAPER, borderColor: LINE }}>
        <div className="mx-auto max-w-[1400px] px-6 lg:px-10 py-7 flex items-center justify-between gap-6">
          <Link href="/" className="flex items-baseline gap-3">
            <span style={{ fontSize: 36, fontWeight: 800, letterSpacing: "-0.03em", color: INK }}>
              Finzone
            </span>
            <span className="hidden sm:inline text-[11px] uppercase tracking-[0.25em]" style={{ color: INK3, fontFamily: NUM }}>
              · Daily
            </span>
          </Link>
          <nav className="hidden lg:flex items-center gap-7 text-[13px] font-semibold uppercase tracking-[0.05em]" style={{ color: INK }}>
            {[["Tin nóng","/category/tin-nong"],["Phân tích","/category/phan-tich"],["Crypto","/category/crypto"],["Chứng khoán","/category/chung-khoan"],["Vàng","/category/vang"],["Forex","/category/forex"]].map(([l,h]) => (
              <Link key={h} href={h!} className="hover:underline underline-offset-4 decoration-2" style={{textDecorationColor: ACCENT}}>
                {l}
              </Link>
            ))}
          </nav>
          <Link href="/tim-kiem" className="text-[12px] uppercase tracking-[0.2em] font-semibold border px-4 py-2 hover:border-current" style={{borderColor: LINE, color: INK2}}>
            Tìm
          </Link>
        </div>
      </header>

      <main>
        {/* PRIMARY GRID — hero spans 7, side 5 */}
        {heroPost && (
          <section className="border-b" style={{ borderColor: LINE, background: PAPER }}>
            <div className="mx-auto max-w-[1400px] px-6 lg:px-10 py-10 lg:py-14">
              <div className="grid grid-cols-12 gap-x-8 gap-y-10">
                {/* HERO */}
                <article className="col-span-12 lg:col-span-7 lg:border-r lg:pr-8" style={{ borderColor: LINE }}>
                  <div className="text-[11px] uppercase tracking-[0.25em] font-bold mb-3" style={{ color: ACCENT, fontFamily: NUM }}>
                    {heroPost.categories[0]?.name ?? "Trang nhất"} · Đặc biệt
                  </div>
                  <Link href={`/${heroPost.slug}`} className="group block">
                    <h1
                      className="group-hover:text-[var(--accent)] mb-5"
                      style={{
                        fontSize: "clamp(34px, 4.4vw, 60px)",
                        lineHeight: 1.04,
                        letterSpacing: "-0.03em",
                        fontWeight: 800,
                        color: INK,
                      }}
                    >
                      {heroPost.title}
                    </h1>
                    {heroPost.featured && (
                      <div className="aspect-[16/10] relative overflow-hidden bg-[#E8E5DD] mb-5">
                        <Image
                          src={heroPost.featured.url}
                          alt={heroPost.featured.alt}
                          fill
                          priority
                          sizes="(max-width: 1024px) 100vw, 60vw"
                          className="object-cover"
                        />
                      </div>
                    )}
                  </Link>
                  {heroPost.excerpt && (
                    <p className="text-[17px] leading-[1.55] mb-5" style={{ color: INK2 }}>
                      {heroPost.excerpt}
                    </p>
                  )}
                  <div className="flex items-center gap-3 text-[11px] uppercase tracking-[0.18em]" style={{ color: INK3, fontFamily: NUM }}>
                    <span className="font-bold" style={{ color: INK }}>{heroPost.author.name}</span>
                    <span>·</span>
                    <span>{heroPost.readMinutes} phút đọc</span>
                    <span>·</span>
                    <span>{new Date(heroPost.date).toLocaleString("vi-VN",{hour:"2-digit",minute:"2-digit"})}</span>
                  </div>
                </article>

                {/* SIDE STACK — 6 stories with hairlines */}
                <div className="col-span-12 lg:col-span-5 space-y-0">
                  <div className="flex items-baseline justify-between border-b-2 pb-2 mb-4" style={{ borderColor: INK }}>
                    <h2 className="text-[15px] font-bold uppercase tracking-[0.15em]">Mới nhất</h2>
                    <Link href="/category/tin-nong" className="text-[11px] uppercase tracking-[0.2em] font-semibold" style={{ color: ACCENT, fontFamily: NUM }}>
                      Tất cả →
                    </Link>
                  </div>
                  <ul>
                    {sub.map((p, i) => (
                      <li key={p.id} className="border-b py-4 first:pt-0" style={{ borderColor: LINE }}>
                        <Link href={`/${p.slug}`} className="grid grid-cols-12 gap-3 group items-start">
                          <span className="col-span-2 text-[11px] uppercase font-bold tracking-[0.15em] pt-1" style={{ color: ACCENT, fontFamily: NUM }}>
                            {p.categories[0]?.name ?? "Tin"}
                          </span>
                          <div className={p.featured ? "col-span-7" : "col-span-10"}>
                            <h3 className="text-[15px] font-bold leading-[1.3] group-hover:underline underline-offset-2" style={{ color: INK }}>
                              {p.title}
                            </h3>
                            <div className="mt-1.5 text-[10px] uppercase tracking-[0.18em]" style={{ color: INK3, fontFamily: NUM }}>
                              {p.readMinutes}' · {new Date(p.date).toLocaleTimeString("vi-VN",{hour:"2-digit",minute:"2-digit"})}
                            </div>
                          </div>
                          {p.featured && (
                            <div className="col-span-3 aspect-[4/3] relative overflow-hidden bg-[#E8E5DD]">
                              <Image src={p.featured.url} alt={p.featured.alt} fill sizes="120px" className="object-cover" />
                            </div>
                          )}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </section>
        )}

        {/* MARKET RAIL — 4 columns dense */}
        <section className="border-b" style={{ borderColor: LINE, background: BG }}>
          <div className="mx-auto max-w-[1400px] px-6 lg:px-10 py-12">
            <div className="flex items-baseline justify-between border-b-2 pb-3 mb-8" style={{ borderColor: INK }}>
              <h2 className="text-[18px] font-bold uppercase tracking-[0.12em]">Theo từng thị trường</h2>
              <span className="text-[11px] uppercase tracking-[0.2em]" style={{ color: INK3, fontFamily: NUM }}>
                Cập nhật {new Date().toLocaleTimeString("vi-VN",{hour:"2-digit",minute:"2-digit"})}
              </span>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10">
              {[
                { title: "Crypto", posts: crypto, href: "/category/crypto" },
                { title: "Chứng khoán", posts: chungKhoan, href: "/category/chung-khoan" },
                { title: "Vàng", posts: vang, href: "/category/vang" },
                { title: "Tin nóng", posts: tinNong, href: "/category/tin-nong" },
              ].map((col, ci) => (
                <div key={col.title} className={ci > 0 ? "lg:border-l lg:pl-8" : ""} style={{ borderColor: LINE }}>
                  <div className="flex items-baseline justify-between mb-4 pb-2 border-b" style={{ borderColor: INK }}>
                    <h3 className="text-[12px] font-bold uppercase tracking-[0.18em]">{col.title}</h3>
                    <Link href={col.href} className="text-[10px] uppercase tracking-[0.2em] font-semibold" style={{ color: ACCENT, fontFamily: NUM }}>
                      →
                    </Link>
                  </div>
                  <ul className="space-y-3">
                    {col.posts.slice(0, 4).map((p, i) => (
                      <li key={p.id} className={`pb-3 ${i < 3 ? "border-b" : ""}`} style={{ borderColor: LINE }}>
                        <Link href={`/${p.slug}`} className="block group">
                          <div className="text-[10px] uppercase tracking-[0.18em] mb-1" style={{ color: INK3, fontFamily: NUM }}>
                            {new Date(p.date).toLocaleString("vi-VN",{day:"2-digit",month:"2-digit",hour:"2-digit",minute:"2-digit"})}
                          </div>
                          <h4 className="text-[14px] font-semibold leading-[1.3] group-hover:underline underline-offset-2" style={{ color: INK }}>
                            {p.title}
                          </h4>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* LONGREAD — single anchor + linkbox */}
        {lr && (
          <section className="border-b" style={{ borderColor: LINE, background: PAPER }}>
            <div className="mx-auto max-w-[1400px] px-6 lg:px-10 py-14 lg:py-18">
              <div className="flex items-baseline justify-between border-b-2 pb-3 mb-8" style={{ borderColor: INK }}>
                <h2 className="text-[18px] font-bold uppercase tracking-[0.12em]">Phân tích chuyên sâu</h2>
                <Link href="/category/phan-tich" className="text-[11px] uppercase tracking-[0.2em] font-semibold" style={{ color: ACCENT, fontFamily: NUM }}>
                  Xem tất cả →
                </Link>
              </div>

              <div className="grid grid-cols-12 gap-8">
                <article className="col-span-12 lg:col-span-8 lg:border-r lg:pr-8" style={{ borderColor: LINE }}>
                  <div className="text-[11px] uppercase tracking-[0.22em] font-bold mb-3" style={{ color: ACCENT, fontFamily: NUM }}>
                    Long-read · {lr.readMinutes} phút đọc
                  </div>
                  <Link href={`/${lr.slug}`} className="group block">
                    {lr.featured && (
                      <div className="aspect-[16/9] relative overflow-hidden bg-[#E8E5DD] mb-5">
                        <Image src={lr.featured.url} alt={lr.featured.alt} fill sizes="(max-width:1024px) 100vw, 60vw" className="object-cover" />
                      </div>
                    )}
                    <h3
                      className="group-hover:underline underline-offset-2 mb-4"
                      style={{
                        fontSize: "clamp(28px, 3.4vw, 44px)",
                        lineHeight: 1.05,
                        letterSpacing: "-0.025em",
                        fontWeight: 800,
                        color: INK,
                      }}
                    >
                      {lr.title}
                    </h3>
                  </Link>
                  {lr.excerpt && (
                    <p className="text-[16px] leading-[1.6] mb-4 max-w-2xl" style={{ color: INK2 }}>
                      {lr.excerpt}
                    </p>
                  )}
                  <div className="flex items-center gap-3 text-[11px] uppercase tracking-[0.18em]" style={{ color: INK3, fontFamily: NUM }}>
                    <span className="font-bold" style={{ color: INK }}>{lr.author.name}</span>
                    <span>·</span>
                    <span>{new Date(lr.date).toLocaleDateString("vi-VN")}</span>
                  </div>
                </article>
                <aside className="col-span-12 lg:col-span-4 space-y-0">
                  <div className="text-[11px] uppercase tracking-[0.22em] font-bold pb-2 border-b mb-4" style={{ color: INK, borderColor: INK }}>
                    Cũng nên đọc
                  </div>
                  <ol className="space-y-0">
                    {lrSide.map((p, i) => (
                      <li key={p.id} className={`py-4 ${i < lrSide.length - 1 ? "border-b" : ""}`} style={{ borderColor: LINE }}>
                        <Link href={`/${p.slug}`} className="grid grid-cols-12 gap-3 group items-baseline">
                          <span className="col-span-2 text-[18px] font-bold" style={{ color: ACCENT, fontFamily: NUM, fontVariantNumeric: "tabular-nums" }}>
                            0{i + 1}
                          </span>
                          <div className="col-span-10">
                            <h4 className="text-[15px] font-bold leading-[1.3] group-hover:underline" style={{ color: INK }}>
                              {p.title}
                            </h4>
                            <div className="mt-1 text-[10px] uppercase tracking-[0.18em]" style={{ color: INK3, fontFamily: NUM }}>
                              {p.categories[0]?.name ?? "Phân tích"} · {p.readMinutes}'
                            </div>
                          </div>
                        </Link>
                      </li>
                    ))}
                  </ol>
                </aside>
              </div>
            </div>
          </section>
        )}

        {/* DATA STRIP */}
        <section style={{ background: INK, color: "#F4F2EC" }}>
          <div className="mx-auto max-w-[1400px] px-6 lg:px-10 py-10">
            <div className="flex items-baseline justify-between mb-5">
              <h2 className="text-[14px] font-bold uppercase tracking-[0.18em]">Theo dõi nhanh</h2>
              <span className="text-[10px] uppercase tracking-[0.22em]" style={{ color: "#9098A8", fontFamily: NUM }}>
                Live · {new Date().toLocaleTimeString("vi-VN")}
              </span>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-y-5 gap-x-6 text-[14px]" style={{ fontFamily: NUM }}>
              {[
                ["VN-Index","1,287.4","+0.42%","up"],
                ["VN30","1,338.2","+0.31%","up"],
                ["BTC","68,420","-1.24%","down"],
                ["ETH","3,524","-0.86%","down"],
                ["USD/VND","25,420","+0.05%","up"],
                ["SJC","76.4M","+0.12%","up"],
              ].map(([sym, val, chg, dir]) => (
                <div key={sym}>
                  <div className="text-[10px] uppercase tracking-[0.22em]" style={{ color: "#9098A8" }}>{sym}</div>
                  <div className="text-[20px] font-bold mt-1" style={{ fontVariantNumeric: "tabular-nums" }}>{val}</div>
                  <div className="text-[12px] mt-0.5" style={{ color: dir === "up" ? "#65E297" : "#FF7B6B" }}>{chg}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="border-t" style={{ background: PAPER, borderColor: LINE, color: INK2 }}>
          <div className="mx-auto max-w-[1400px] px-6 lg:px-10 py-12 lg:py-16">
            <div className="grid grid-cols-12 gap-8 mb-10">
              <div className="col-span-12 lg:col-span-4">
                <span style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-0.03em", color: INK }}>
                  Finzone
                </span>
                <p className="mt-3 text-[14px] leading-[1.6] max-w-sm">
                  Tin tài chính · Phân tích thị trường · cho người đầu tư có suy nghĩ. Cập nhật từng phút, mỗi phiên giao dịch.
                </p>
              </div>
              {[
                { title: "Chuyên mục", items: [["Tin nóng","/category/tin-nong"],["Phân tích","/category/phan-tich"],["Crypto","/category/crypto"],["Chứng khoán","/category/chung-khoan"],["Vàng","/category/vang"],["Forex","/category/forex"]] },
                { title: "Tòa soạn", items: [["Giới thiệu","/gioi-thieu"],["Liên hệ","/lien-he"],["Cộng đồng","/cong-dong"]] },
                { title: "Chính sách", items: [["Biên tập","/chinh-sach-bien-tap"],["Miễn trừ","/mien-tru-dau-tu"],["Bảo mật","/bao-mat"]] },
                { title: "Theo dõi", items: [["Newsletter","/cong-dong#newsletter"],["Telegram","https://t.me/finzonenetwork"],["Facebook","https://www.facebook.com/finzonenetwork"],["RSS","/feed.xml"]] },
              ].map((col) => (
                <div key={col.title} className="col-span-6 lg:col-span-2">
                  <div className="text-[11px] uppercase tracking-[0.2em] font-bold pb-2 mb-3 border-b" style={{ color: INK, borderColor: INK }}>
                    {col.title}
                  </div>
                  <ul className="space-y-1.5 text-[13px]">
                    {col.items.map(([l,h]) => (
                      <li key={h}><Link href={h!} className="hover:underline">{l}</Link></li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
            <div className="pt-5 border-t flex justify-between items-center text-[11px] uppercase tracking-[0.2em]"
              style={{ borderColor: LINE, color: INK3, fontFamily: NUM }}>
              <span>© {new Date().getFullYear()} Finzone Network</span>
              <span>Vietnam · vi-VN</span>
            </div>
          </div>
        </footer>
      </main>
    </div>
  );
}