import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import tasting from "@/assets/wine-tasting.webp.asset.json";
import { BlogSidebar, NewsletterBand } from "@/components/site/BlogExtras";
import { FaIcon } from "@/components/site/FaIcon";
import { categories, filterPosts } from "@/content/posts";

type Search = { q?: string | undefined; categoria?: string | undefined };

export const Route = createFileRoute("/blog/")({
  validateSearch: (raw: Record<string, unknown>): Search => { const s = raw as Search; return {
    q: typeof s.q === "string" && s.q.trim() ? s.q.slice(0, 100) : undefined,
    categoria: typeof s.categoria === "string" && categories.includes(s.categoria) ? s.categoria : undefined,
    };
  },
  head: () => ({
    meta: [
      { title: "Blog | ÚNIKKO Winery Ventures" },
      { name: "description", content: "Compartilhando a visão, os dados e a cultura estratégica por trás da ÚNIKKO e o futuro dos ativos reais premium." },
      { property: "og:title", content: "Blog | ÚNIKKO Winery Ventures" },
      { property: "og:description", content: "A visão, os dados e a cultura estratégica por trás da ÚNIKKO." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Blog,
});

const pill = "rounded-full px-4 py-1 font-cond text-[11px] font-semibold uppercase tracking-[0.3em] transition-colors";

function Blog() {
  const { q, categoria } = Route.useSearch();
  const navigate = useNavigate({ from: "/blog/" });
  const [text, setText] = useState(q ?? "");
  useEffect(() => setText(q ?? ""), [q]);
  const list = filterPosts(q, categoria);

  return (
    <>
      <section className="relative bg-cover bg-center" style={{ backgroundImage: `url(${tasting.url})` }}>
        <div className="absolute inset-0 bg-primary/80" />
        <div className="relative mx-auto max-w-[1140px] px-5 py-[100px] xl:px-0">
          <h1 className="font-display text-[60px] font-black leading-none text-cream md:text-[72px]">Blog</h1>
          <p className="mt-4 max-w-[540px] text-[17px] leading-[1.55] text-primary-foreground/80">
            Compartilhando a visão, os dados e a cultura estratégica por trás da ÚNIKKO e o futuro dos ativos reais premium.
          </p>
          <form
            className="mt-12 flex max-w-[413px]"
            role="search"
            onSubmit={(e) => {
              e.preventDefault();
              navigate({ search: (s) => ({ ...s, q: text.trim() || undefined }) });
            }}
          >
            <input
              type="search"
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder="Buscar artigos"
              aria-label="Buscar artigos"
              className="h-[42px] min-w-0 flex-1 rounded-l-[6px] bg-background px-3 text-[16px] text-ink focus:outline-none"
            />
            <button className="h-[42px] rounded-r-[6px] bg-ink px-3 font-cond text-[16px] font-bold uppercase tracking-[0.2em] text-primary-foreground">
              Buscar
            </button>
          </form>
        </div>
      </section>
      <div className="border-b border-border bg-background">
        <div className="mx-auto flex max-w-[1140px] flex-wrap gap-[10px] px-5 py-[15px] xl:px-0">
          <Link
            to="/blog"
            search={(s: Search) => ({ ...s, categoria: undefined })}
            className={`${pill} ${!categoria ? "bg-primary text-primary-foreground" : "border border-primary text-primary hover:bg-primary hover:text-primary-foreground"}`}
          >
            Todos
          </Link>
          {categories.map((c) => (
            <Link
              key={c}
              to="/blog"
              search={(s: Search) => ({ ...s, categoria: c })}
              className={`${pill} ${categoria === c ? "bg-primary text-primary-foreground" : "border border-primary text-primary hover:bg-primary hover:text-primary-foreground"}`}
            >
              {c}
            </Link>
          ))}
        </div>
      </div>
      <section className="bg-background py-[70px]">
        <div className="mx-auto grid max-w-[1140px] gap-10 px-5 md:grid-cols-[1fr_360px] xl:px-0">
          <div>
            <h2 className="font-display text-[30px] font-black text-ink">
              {q ? `Resultados para “${q}”` : "Posts Recentes"}
            </h2>
            {list.length === 0 ? (
              <div className="mt-5 text-[16px] text-muted-foreground">
                <p>Nenhum artigo encontrado.</p>
                <Link to="/blog" search={{}} className="mt-3 inline-block font-cond text-[13px] font-bold uppercase tracking-[0.3em] text-primary">
                  Ver todos os artigos
                </Link>
              </div>
            ) : (
              <div className="mt-5 grid gap-6 sm:grid-cols-2">
                {list.map((p) => (
                  <article key={p.slug} className="max-w-[367px] overflow-hidden rounded-[20px] border border-border bg-background shadow-xl shadow-primary/5">
                    <Link to={p.slug} className="relative block">
                      <img src={p.image} alt={p.imageAlt} className="h-[206px] w-full object-cover" />
                      <div className="absolute left-3 top-4 flex flex-wrap gap-[6px] pr-3">
                        {p.categories.map((c) => (
                          <span key={c} className="rounded-[3px] bg-accent px-[10px] py-[2px] text-[10px] font-semibold uppercase text-ink">{c}</span>
                        ))}
                      </div>
                    </Link>
                    <div className="px-4 pb-4 pt-5">
                      <Link to={p.slug}>
                        <h3 className="font-display text-[22px] font-bold leading-[1.2] text-ink">{p.title}</h3>
                      </Link>
                      <p className="mt-3 text-[16px] leading-[1.5] text-muted-foreground">{p.excerpt}</p>
                      <div className="mt-4 flex items-center justify-between border-t border-border pt-4">
                        <span className="flex items-center gap-1 font-cond text-[12px] text-muted-foreground">
                          <FaIcon name="calendar" size={12} className="text-primary" /> {p.date}
                        </span>
                        <Link to={p.slug} className="font-cond text-[13px] font-bold uppercase tracking-[0.3em] text-primary">
                          Ler artigo
                        </Link>
                      </div>
                    </div>
                  </article>
                ))}
              </div>
            )}
          </div>
          <BlogSidebar active={categoria} />
        </div>
      </section>
      <NewsletterBand />
    </>
  );
}