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

export const metadata = { title: "Mockup F · Brutalist · Preview" };
export const dynamic = "force-dynamic";

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

/**
 * MOCKUP F — Brutalist Anti-Design.
 * Kanye.com × Are.na × early Yale School of Art × Bloomberg.com 1996.
 * Reject the publication metaphor entirely. No grid. No cards. No card chrome.
 * Headlines collide and overlap. Massive type 200px+. Mono everywhere. Black
 * on white only (with one Klein-blue accent). Raw HTML feel — like the page
 * wasn't designed, it was typed.
 */
export default async function MockupFPage() {
  const [
    { posts: feat },
    { posts: latest },
    { posts: phanTich },
    { posts: tinNong },
    { posts: crypto },
  ] = await Promise.all([
    listPosts({ perPage: 1, featured: true, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 30, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 6, categories: [CAT_IDS.phanTich] }),
    listPosts({ perPage: 8, categories: [CAT_IDS.tinNong] }),
    listPosts({ perPage: 5, categories: [CAT_IDS.crypto] }),
  ]);

  const heroPost = feat[0] ?? latest[0];
  const wallPosts = latest.slice(0, 24);

  const MONO = "var(--font-jetbrains-mono)";
  const BLACK = "#000000";
  const WHITE = "#FFFFFF";
  const KLEIN = "#0017FF";
  const RED = "#FF0000";

  // For the wall: deterministic pseudo-random offsets per post index
  const offset = (i: number, seed: number) => {
    const v = (Math.sin(i * 12.9898 + seed * 78.233) * 43758.5453) % 1;
    return Math.abs(v);
  };

  return (
    <div style={{ background: WHITE, color: BLACK, minHeight: "100vh", fontFamily: MONO }}>
      <PreviewBar active="f" />

      {/* RAW MASTHEAD — flat HTML feel */}
      <header className="border-b-[3px]" style={{ borderColor: BLACK }}>
        <div className="mx-auto max-w-[1600px] px-4 py-3 flex flex-wrap items-baseline justify-between gap-4 text-[12px]">
          <div className="flex items-baseline gap-3 flex-wrap">
            <Link href="/" className="font-bold uppercase">FINZONE.NETWORK</Link>
            <span>/</span>
            <span>{new Date().toUTCString()}</span>
            <span>/</span>
            <span className="uppercase">VIETNAM</span>
            <span>/</span>
            <span>vi-VN</span>
          </div>
          <div className="flex items-baseline gap-3 flex-wrap text-[11px] uppercase">
            {[
              ["[A]", "/category/tin-nong", "TIN"],
              ["[B]", "/category/phan-tich", "PHANTICH"],
              ["[C]", "/category/crypto", "CRYPTO"],
              ["[D]", "/category/chung-khoan", "CK"],
              ["[E]", "/category/vang", "VANG"],
              ["[F]", "/category/forex", "FOREX"],
              ["[?]", "/tim-kiem", "FIND"],
            ].map(([key, h, l]) => (
              <Link key={l} href={h!} className="hover:bg-black hover:text-white px-1">
                <span style={{ color: KLEIN }}>{key}</span>{" "}{l}
              </Link>
            ))}
          </div>
        </div>
      </header>

      {/* RAW DATA STRIP */}
      <div className="border-b-[3px] overflow-x-auto" style={{ borderColor: BLACK, background: BLACK, color: WHITE }}>
        <div className="px-4 py-2 flex items-center gap-6 text-[11px] whitespace-nowrap">
          <span className="font-bold">[LIVE]</span>
          {[
            ["VN-INDEX", "1287.42", "+0.42"],
            ["VN30", "1338.21", "+0.31"],
            ["BTC", "68420", "-1.24"],
            ["ETH", "3524", "-0.86"],
            ["USDVND", "25420", "+0.05"],
            ["DXY", "104.82", "+0.30"],
            ["GOLD-SJC", "76.4M", "+0.13"],
            ["XAU", "2372.50", "-0.34"],
          ].map(([s, v, c]) => {
            const n = Number(c);
            return (
              <span key={s} className="flex items-baseline gap-1">
                <span>{s}</span>
                <span className="font-bold">{v}</span>
                <span style={{ color: n >= 0 ? "#00FF88" : "#FF4444" }}>{c}%</span>
              </span>
            );
          })}
        </div>
      </div>

      <main>
        {/* HERO — typographic explosion, no photo */}
        {heroPost && (
          <section
            className="border-b-[3px] relative overflow-hidden"
            style={{ borderColor: BLACK }}
          >
            <div className="mx-auto max-w-[1600px] px-4 py-12 lg:py-20 relative">
              {/* TIMESTAMP corner */}
              <div className="absolute top-4 right-4 text-[10px] uppercase tracking-wider">
                FILE://01/HERO · LAST_MODIFIED:{" "}
                {new Date(heroPost.date).toISOString().slice(0, 16).replace("T", " ")}
              </div>

              {/* Eyebrow */}
              <div className="text-[14px] uppercase font-bold mb-6 flex items-baseline gap-3 flex-wrap">
                <span style={{ background: BLACK, color: WHITE }} className="px-2 py-1">
                  CATEGORY: {(heroPost.categories[0]?.name ?? "TIN").toUpperCase()}
                </span>
                <span>·</span>
                <span>FEATURED:TRUE</span>
                <span>·</span>
                <span>READTIME:{heroPost.readMinutes}MIN</span>
                <span style={{ color: KLEIN }}>· EXTERNAL_RANK:01</span>
              </div>

              {/* MASSIVE OVERLAPPING TYPE */}
              <Link href={`/${heroPost.slug}`} className="block group">
                <h1
                  className="font-black uppercase break-words leading-[0.85] tracking-tighter"
                  style={{
                    fontFamily: "var(--font-manrope)",
                    fontSize: "clamp(64px, 13vw, 220px)",
                    fontWeight: 900,
                    letterSpacing: "-0.05em",
                  }}
                >
                  {heroPost.title.split(" ").slice(0, 4).join(" ")}
                </h1>
                <h1
                  className="font-black uppercase italic break-words leading-[0.85] tracking-tighter -mt-3 lg:-mt-6"
                  style={{
                    fontFamily: "var(--font-manrope)",
                    fontSize: "clamp(48px, 11vw, 180px)",
                    fontWeight: 900,
                    letterSpacing: "-0.05em",
                    color: KLEIN,
                    transform: "translateX(2vw)",
                  }}
                >
                  {heroPost.title.split(" ").slice(4).join(" ") || "→ ĐỌC TIẾP"}
                </h1>
              </Link>

              {heroPost.excerpt && (
                <p
                  className="mt-10 max-w-3xl text-[18px] leading-[1.6] uppercase font-medium"
                >
                  {heroPost.excerpt}
                </p>
              )}

              <div className="mt-10 flex flex-wrap items-baseline gap-2 text-[12px] uppercase font-bold">
                <span>BY:{heroPost.author.name.toUpperCase()}</span>
                <span>·</span>
                <span>{new Date(heroPost.date).toLocaleDateString("vi-VN")}</span>
                <span>·</span>
                <Link href={`/${heroPost.slug}`} className="bg-black text-white px-3 py-1.5 hover:bg-[#0017FF]">
                  → VIEW_FULL_DOCUMENT
                </Link>
              </div>

              {/* Decorative ruler markings */}
              <div className="absolute left-0 top-0 bottom-0 w-1 flex flex-col">
                {Array.from({ length: 20 }).map((_, i) => (
                  <div key={i} className="flex-1 border-b" style={{ borderColor: BLACK }} />
                ))}
              </div>
            </div>
          </section>
        )}

        {/* ASCII SECTION DIVIDER */}
        <div className="border-b-[3px] py-2 px-4 text-center text-[10px] tracking-[0.3em]" style={{ borderColor: BLACK }}>
          ─────────────────────── BEGIN INDEX ───────────────────────
        </div>

        {/* RAW POST WALL — table-like list, no chrome */}
        <section className="border-b-[3px]" style={{ borderColor: BLACK }}>
          <div className="mx-auto max-w-[1600px] px-4 py-8">
            <div className="flex items-baseline justify-between mb-6">
              <h2 className="font-black uppercase text-[28px] lg:text-[40px]" style={{ fontFamily: "var(--font-manrope)", letterSpacing: "-0.04em" }}>
                INDEX/{wallPosts.length}_DOCUMENTS
              </h2>
              <span className="text-[11px] uppercase">
                SORTED:DESC · UPDATED:{new Date().toLocaleTimeString("vi-VN")}
              </span>
            </div>

            <table className="w-full text-[13px]">
              <thead className="border-y-[2px]" style={{ borderColor: BLACK }}>
                <tr className="text-[10px] uppercase font-bold">
                  <th className="text-left py-2 pr-3 w-[60px]">#</th>
                  <th className="text-left py-2 pr-3 hidden sm:table-cell w-[120px]">TIMESTAMP</th>
                  <th className="text-left py-2 pr-3 hidden md:table-cell w-[100px]">CATEGORY</th>
                  <th className="text-left py-2 pr-3">TITLE</th>
                  <th className="text-left py-2 pr-3 hidden lg:table-cell w-[120px]">AUTHOR</th>
                  <th className="text-right py-2 w-[60px]">MIN</th>
                </tr>
              </thead>
              <tbody>
                {wallPosts.map((p, i) => (
                  <tr
                    key={p.id}
                    className="border-b group hover:bg-black hover:text-white transition-none"
                    style={{ borderColor: "#000" }}
                  >
                    <td className="py-2 pr-3 font-bold tabular-nums">
                      {String(i + 1).padStart(3, "0")}
                    </td>
                    <td className="py-2 pr-3 hidden sm:table-cell text-[11px]">
                      {new Date(p.date).toISOString().slice(0, 16).replace("T", " ")}
                    </td>
                    <td className="py-2 pr-3 hidden md:table-cell uppercase text-[11px] font-bold">
                      <span className="group-hover:bg-[#0017FF] group-hover:text-white px-1" style={{ background: i < 3 ? KLEIN : "transparent", color: i < 3 ? WHITE : BLACK }}>
                        {(p.categories[0]?.name ?? "TIN").slice(0, 8).toUpperCase()}
                      </span>
                    </td>
                    <td className="py-2 pr-3">
                      <Link href={`/${p.slug}`} className="font-bold hover:underline block">
                        {p.title}
                      </Link>
                    </td>
                    <td className="py-2 pr-3 hidden lg:table-cell text-[11px] uppercase">
                      {p.author.name}
                    </td>
                    <td className="py-2 text-right tabular-nums font-bold">
                      {p.readMinutes}'
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        {/* MANIFESTO BLOCK — Klein blue field with massive text */}
        <section className="border-b-[3px] relative" style={{ borderColor: BLACK, background: KLEIN, color: WHITE }}>
          <div className="mx-auto max-w-[1600px] px-4 py-16 lg:py-24">
            <div className="text-[11px] uppercase font-bold mb-6">
              MANIFESTO/01 · POSTED:01.06.2026 · IRREVOCABLE
            </div>
            <p
              className="font-black uppercase leading-[0.95]"
              style={{
                fontFamily: "var(--font-manrope)",
                fontSize: "clamp(32px, 6vw, 88px)",
                letterSpacing: "-0.04em",
              }}
            >
              CHÚNG TÔI KHÔNG VIẾT TIN. CHÚNG TÔI{" "}
              <span style={{ color: BLACK, background: WHITE, padding: "0 0.2em" }}>
                CHỨNG MINH
              </span>{" "}
              GIÁ TRỊ CỦA THÔNG TIN BẰNG SỐ LIỆU. KHÔNG GIẬT TÍT.{" "}
              <span style={{ textDecoration: "line-through" }}>KHÔNG SPONSORED.</span>{" "}
              KHÔNG NGỦ.
            </p>
            <div className="mt-8 flex flex-wrap items-baseline gap-3 text-[12px] uppercase font-bold">
              <span>SIGNED:FINZONE/EDITORIAL</span>
              <span>·</span>
              <span>VERSION:0.2.0</span>
              <span>·</span>
              <span>HASH:18FE372</span>
            </div>
          </div>
          {/* corner registration marks */}
          {[["top-2 left-2", "+"], ["top-2 right-2", "+"], ["bottom-2 left-2", "+"], ["bottom-2 right-2", "+"]].map(([pos, c]) => (
            <span key={pos} className={`absolute ${pos} text-[20px] font-bold leading-none`}>{c}</span>
          ))}
        </section>

        {/* PHAN TICH — collision layout, headlines overlap */}
        <section className="border-b-[3px]" style={{ borderColor: BLACK }}>
          <div className="mx-auto max-w-[1600px] px-4 py-12">
            <div className="flex items-baseline justify-between mb-8 border-b-[2px] pb-2" style={{ borderColor: BLACK }}>
              <h2 className="font-black uppercase text-[40px] lg:text-[64px] leading-[0.9]" style={{ fontFamily: "var(--font-manrope)", letterSpacing: "-0.04em" }}>
                ANALYSIS/SECTION
              </h2>
              <span className="text-[11px] uppercase">{phanTich.length} ENTRIES</span>
            </div>

            <div className="space-y-12">
              {phanTich.slice(0, 4).map((p, i) => {
                const skewed = i % 2 === 0;
                const indent = `${(offset(i, 1) * 8).toFixed(1)}vw`;
                return (
                  <article key={p.id} className="relative">
                    <div className="text-[10px] uppercase font-bold mb-2 flex flex-wrap items-baseline gap-2">
                      <span className="tabular-nums">DOC:{String(i + 1).padStart(2, "0")}</span>
                      <span>/</span>
                      <span style={{ background: BLACK, color: WHITE }} className="px-1">
                        {(p.categories[0]?.name ?? "PHAN TICH").toUpperCase()}
                      </span>
                      <span>/</span>
                      <span>{new Date(p.date).toISOString().slice(0, 10)}</span>
                      <span>/</span>
                      <span style={{ color: KLEIN }}>{p.readMinutes} MIN</span>
                    </div>
                    <Link href={`/${p.slug}`} className="block group">
                      <h3
                        className={`font-black uppercase leading-[0.9] tracking-tighter break-words group-hover:text-[#0017FF] transition-none ${skewed ? "text-left" : "text-right"}`}
                        style={{
                          fontFamily: "var(--font-manrope)",
                          fontSize: "clamp(36px, 7vw, 110px)",
                          letterSpacing: "-0.04em",
                          marginLeft: skewed ? 0 : indent,
                          marginRight: skewed ? indent : 0,
                          fontWeight: 900,
                        }}
                      >
                        {p.title}
                      </h3>
                    </Link>
                    {p.excerpt && (
                      <p
                        className="mt-4 max-w-2xl text-[14px] leading-[1.55]"
                        style={{ marginLeft: skewed ? 0 : "auto" }}
                      >
                        ↳ {p.excerpt.slice(0, 220)}
                      </p>
                    )}
                  </article>
                );
              })}
            </div>
          </div>
        </section>

        {/* TIN NÓNG — newsprint columns, tight rows */}
        <section className="border-b-[3px]" style={{ borderColor: BLACK }}>
          <div className="mx-auto max-w-[1600px] px-4 py-10">
            <div className="flex items-baseline justify-between mb-6">
              <h2 className="font-black uppercase text-[28px] lg:text-[40px]" style={{ fontFamily: "var(--font-manrope)", letterSpacing: "-0.04em" }}>
                NEWS/TIN_NONG
              </h2>
              <span className="text-[11px] uppercase">RT/{tinNong.length}</span>
            </div>
            <div className="columns-1 sm:columns-2 lg:columns-4 gap-6 [column-rule:2px_solid_black]">
              {tinNong.map((p, i) => (
                <article key={p.id} className="break-inside-avoid mb-6">
                  <div className="text-[10px] uppercase font-bold mb-1 flex items-baseline gap-2">
                    <span>{String(i + 1).padStart(3, "0")}</span>
                    <span>·</span>
                    <span style={{ color: i % 3 === 0 ? KLEIN : BLACK }}>
                      {(p.categories[0]?.name ?? "TIN").toUpperCase()}
                    </span>
                  </div>
                  <Link href={`/${p.slug}`} className="block group">
                    <h3
                      className="font-bold uppercase leading-[1.05] group-hover:underline mb-2"
                      style={{ fontFamily: "var(--font-manrope)", fontSize: 18, letterSpacing: "-0.02em" }}
                    >
                      {p.title}
                    </h3>
                  </Link>
                  {p.excerpt && (
                    <p className="text-[12px] leading-[1.55]">{p.excerpt.slice(0, 120)}…</p>
                  )}
                  <div className="text-[10px] uppercase mt-2 flex items-baseline gap-2">
                    <span>{new Date(p.date).toISOString().slice(0, 10)}</span>
                    <span>·</span>
                    <span>{p.readMinutes} MIN</span>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* CRYPTO BLOCK — black inverse */}
        <section className="border-b-[3px]" style={{ borderColor: BLACK, background: BLACK, color: WHITE }}>
          <div className="mx-auto max-w-[1600px] px-4 py-12">
            <div className="flex items-baseline justify-between mb-8 border-b-[2px] pb-2" style={{ borderColor: WHITE }}>
              <h2 className="font-black uppercase text-[28px] lg:text-[40px]" style={{ fontFamily: "var(--font-manrope)", letterSpacing: "-0.04em" }}>
                CRYPTO/INVERTED
              </h2>
              <span className="text-[11px] uppercase">VOLATILE</span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-0 border-l border-t" style={{ borderColor: WHITE }}>
              {crypto.map((p, i) => (
                <Link
                  key={p.id}
                  href={`/${p.slug}`}
                  className="border-r border-b p-4 hover:bg-[#0017FF] transition-none group"
                  style={{ borderColor: WHITE, minHeight: 200 }}
                >
                  <div className="text-[28px] font-bold tabular-nums leading-none mb-3" style={{ color: i % 2 === 0 ? "#00FF88" : "#FF4444" }}>
                    {String(i + 1).padStart(2, "0")}
                  </div>
                  <h3 className="font-bold uppercase leading-[1.1]" style={{ fontFamily: "var(--font-manrope)", fontSize: 16, letterSpacing: "-0.02em" }}>
                    {p.title}
                  </h3>
                  <div className="mt-4 text-[10px] uppercase border-t pt-2" style={{ borderColor: "#333" }}>
                    {new Date(p.date).toISOString().slice(0, 10)} · {p.readMinutes}MIN
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* RAW FOOTER */}
        <footer style={{ background: WHITE, color: BLACK }}>
          <div className="mx-auto max-w-[1600px] px-4 py-8 text-[11px] uppercase">
            <div className="flex flex-wrap items-baseline justify-between gap-4 border-b-[2px] pb-3 mb-3" style={{ borderColor: BLACK }}>
              <Link href="/" className="font-black text-[28px] tracking-tighter" style={{ fontFamily: "var(--font-manrope)", letterSpacing: "-0.04em" }}>
                FINZONE.NETWORK
              </Link>
              <span>EOF · COPYRIGHT 2026</span>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
              <div>
                <div className="font-bold mb-2">/INDEX</div>
                <ul className="space-y-0.5 normal-case">
                  <li><Link href="/" className="hover:underline">/home</Link></li>
                  <li><Link href="/tim-kiem" className="hover:underline">/search</Link></li>
                  <li><Link href="/feed.xml" className="hover:underline">/feed.xml</Link></li>
                  <li><Link href="/sitemap.xml" className="hover:underline">/sitemap.xml</Link></li>
                </ul>
              </div>
              <div>
                <div className="font-bold mb-2">/SECTIONS</div>
                <ul className="space-y-0.5 normal-case">
                  {[["TIN","/category/tin-nong"],["PHANTICH","/category/phan-tich"],["CRYPTO","/category/crypto"],["CK","/category/chung-khoan"]].map(([l,h]) => (
                    <li key={h}><Link href={h} className="hover:underline">/{l}</Link></li>
                  ))}
                </ul>
              </div>
              <div>
                <div className="font-bold mb-2">/META</div>
                <ul className="space-y-0.5 normal-case">
                  <li><Link href="/gioi-thieu" className="hover:underline">/about</Link></li>
                  <li><Link href="/lien-he" className="hover:underline">/contact</Link></li>
                  <li><Link href="/bao-mat" className="hover:underline">/privacy</Link></li>
                  <li><Link href="/dieu-khoan" className="hover:underline">/tos</Link></li>
                </ul>
              </div>
              <div>
                <div className="font-bold mb-2">/SIGNAL</div>
                <ul className="space-y-0.5 normal-case">
                  <li><a href="https://t.me/finzonenetwork" className="hover:underline">/telegram</a></li>
                  <li><a href="https://x.com" className="hover:underline">/x</a></li>
                  <li><a href="https://www.facebook.com/finzonenetwork" className="hover:underline">/fb</a></li>
                  <li><Link href="/cong-dong#newsletter" className="hover:underline">/newsletter</Link></li>
                </ul>
              </div>
              <div>
                <div className="font-bold mb-2">/SYSTEM</div>
                <ul className="space-y-0.5">
                  <li>BUILD: 18FE372</li>
                  <li>UPTIME: 100.00%</li>
                  <li>RPS: 12.4</li>
                  <li>DB: PG16</li>
                </ul>
              </div>
            </div>
            <div className="mt-6 pt-3 border-t-[2px] flex flex-wrap items-baseline justify-between gap-3" style={{ borderColor: BLACK }}>
              <span>{">"}_ FINZONE-NETWORK · MADE IN VIETNAM · NO TRACKERS · NO SPONSORED CONTENT</span>
              <span style={{ color: KLEIN }}>● PRESS [Q] TO QUIT</span>
            </div>
          </div>
        </footer>
      </main>
    </div>
  );
}