import { useMemo, useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { ArrowUpRight, Play, Sparkles } from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";
import { PageHeader } from "@/components/site/PageHeader";

export const Route = createFileRoute("/conteudos")({
  head: () => ({
    meta: [
      { title: "Insights — Instituto Vida Segura" },
      {
        name: "description",
        content:
          "Artigos, cases, notícias e podcasts produzidos para apoiar empresas, líderes e profissionais na construção de ambientes mais saudáveis, seguros e produtivos.",
      },
      { property: "og:title", content: "Insights — Instituto Vida Segura" },
      {
        property: "og:description",
        content:
          "Conhecimento que transforma pessoas e fortalece empresas.",
      },
    ],
  }),
  component: InsightsPage,
});

/**
 * Estrutura de conteúdo preparada para CMS.
 * Campos: categoria, título, resumo, conteúdo completo, imagem, autor,
 * data, tags, tempo de leitura (artigos), duração (podcasts),
 * destaque (Sim/Não), resultados (cases), convidado (podcasts), novo (notícias).
 */
export type Categoria = "artigo" | "case" | "noticia" | "podcast";

export interface ConteudoItem {
  id: string;
  categoria: Categoria;
  titulo: string;
  resumo: string;
  conteudo?: string;
  imagem: string;
  autor?: string;
  data: string; // ISO
  tags?: string[];
  tempoLeitura?: string; // artigos
  duracao?: string; // podcasts
  destaque?: boolean;
  resultados?: string[]; // cases
  convidado?: string; // podcasts
  novo?: boolean; // notícias
  subcategoria?: string;
}

const conteudos: ConteudoItem[] = [
  {
    id: "nr1-pgr",
    categoria: "artigo",
    subcategoria: "NR-1",
    titulo: "NR-1: o que muda na prática para o PGR da sua empresa",
    resumo:
      "As 6 dimensões de risco psicossocial, prazos de fiscalização e o que precisa estar documentado.",
    imagem:
      "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=1200&q=70",
    autor: "Equipe Vida Segura",
    data: "2025-09-10",
    tempoLeitura: "10 min",
    tags: ["NR-1", "PGR", "Compliance"],
    destaque: true,
  },
  {
    id: "iso-45003",
    categoria: "artigo",
    subcategoria: "ISO 45003",
    titulo: "ISO 45003 explicada sem juridiquês",
    resumo:
      "Como a norma internacional se conecta à NR-1 e por que protocolos científicos importam.",
    imagem:
      "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=70",
    data: "2025-08-22",
    tempoLeitura: "8 min",
    tags: ["ISO 45003"],
  },
  {
    id: "burnout-sinais",
    categoria: "artigo",
    subcategoria: "Saúde mental",
    titulo: "Como identificar sinais de burnout antes que ele se instale",
    resumo:
      "Cinco marcadores observáveis e três conversas que todo líder deveria saber conduzir.",
    imagem:
      "https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1200&q=70",
    data: "2025-07-30",
    tempoLeitura: "8 min",
    tags: ["Burnout", "Liderança"],
  },
  {
    id: "case-industria-sul",
    categoria: "case",
    titulo: "Indústria do Sul reduz afastamentos em 38% em 9 meses",
    resumo:
      "Como a implantação combinada de Safe Company e Mind Family transformou o clima e os indicadores de saúde.",
    imagem:
      "https://images.unsplash.com/photo-1581090700227-1e37b190418e?auto=format&fit=crop&w=1200&q=70",
    data: "2025-06-18",
    resultados: [
      "-38% afastamentos por saúde mental",
      "+27 pts eNPS em 9 meses",
      "100% dos líderes treinados em NR-1",
    ],
    destaque: true,
  },
  {
    id: "case-varejo",
    categoria: "case",
    titulo: "Rede varejista amplia cuidado emocional às famílias",
    resumo:
      "Um programa que passou do colaborador para dependentes e mudou a percepção de valor do benefício.",
    imagem:
      "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=70",
    data: "2025-05-02",
    resultados: [
      "3.400 famílias impactadas",
      "+41% adesão ao benefício",
    ],
  },
  {
    id: "noticia-fiscalizacao",
    categoria: "noticia",
    subcategoria: "Regulação",
    titulo: "MTE inicia fiscalização de riscos psicossociais em empresas",
    resumo:
      "A partir de 2026, auditores passam a exigir evidências das 6 dimensões previstas na NR-1.",
    imagem:
      "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1200&q=70",
    data: "2025-10-01",
    novo: true,
  },
  {
    id: "noticia-oms",
    categoria: "noticia",
    subcategoria: "Saúde pública",
    titulo: "OMS atualiza diretrizes globais sobre saúde mental no trabalho",
    resumo:
      "Novas recomendações reforçam prevenção, apoio da chefia e cuidado com dependentes.",
    imagem:
      "https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?auto=format&fit=crop&w=1200&q=70",
    data: "2025-09-14",
    novo: true,
  },
  {
    id: "podcast-lideranca",
    categoria: "podcast",
    titulo: "Ep. 12 — Liderança que cuida: o novo papel da chefia",
    resumo:
      "Uma conversa sobre como líderes se tornam o principal fator de proteção emocional dos times.",
    imagem:
      "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?auto=format&fit=crop&w=1200&q=70",
    data: "2025-09-25",
    duracao: "42 min",
    convidado: "Dra. Marina Rocha",
  },
  {
    id: "podcast-familia",
    categoria: "podcast",
    titulo: "Ep. 11 — Quando o cuidado emocional inclui a família",
    resumo:
      "Por que estender saúde mental aos dependentes muda os indicadores de toda a operação.",
    imagem:
      "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=1200&q=70",
    data: "2025-08-30",
    duracao: "38 min",
    convidado: "Rafael Menezes",
  },
];

const tabs = [
  { id: "todos", label: "Todos" },
  { id: "artigo", label: "Artigos" },
  { id: "case", label: "Cases" },
  { id: "noticia", label: "Notícias" },
  { id: "podcast", label: "Podcast" },
] as const;

type TabId = (typeof tabs)[number]["id"];

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
}

function InsightsPage() {
  const [active, setActive] = useState<TabId>("todos");

  const filtered = useMemo(() => {
    const list =
      active === "todos"
        ? conteudos
        : conteudos.filter((c) => c.categoria === active);
    return [...list].sort((a, b) => (a.data < b.data ? 1 : -1));
  }, [active]);

  return (
    <SiteShell>
      <PageHeader
        eyebrow="Insights"
        title="Conhecimento que transforma pessoas"
        highlight="e fortalece empresas."
        description="Artigos, cases, notícias e podcasts produzidos para apoiar empresas, líderes e profissionais na construção de ambientes mais saudáveis, seguros e produtivos."
      />

      <section className="container-page py-14 sm:py-20 lg:py-28">
        {/* Tabs */}
        <div
          role="tablist"
          aria-label="Filtrar por categoria"
          className="mb-10 flex flex-wrap gap-2 sm:mb-12"
        >
          {tabs.map((t) => {
            const isActive = active === t.id;
            return (
              <button
                key={t.id}
                role="tab"
                aria-selected={isActive}
                onClick={() => setActive(t.id)}
                className={`rounded-full border px-4 py-2 text-xs font-medium uppercase tracking-[0.16em] transition-all sm:px-5 sm:py-2.5 sm:text-[13px] ${
                  isActive
                    ? "border-[color:var(--life)]/50 bg-[color:var(--life)]/10 text-[color:var(--life-glow)]"
                    : "border-border text-muted-foreground hover:border-[color:var(--life)]/30 hover:text-foreground"
                }`}
              >
                {t.label}
              </button>
            );
          })}
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {filtered.map((item) => (
            <ContentCard key={item.id} item={item} />
          ))}
        </div>

        {filtered.length === 0 && (
          <p className="mt-16 text-center text-muted-foreground">
            Em breve novos conteúdos nesta categoria.
          </p>
        )}

        <div className="mt-16 rounded-3xl glass-card p-8 text-center sm:mt-20 sm:p-10">
          <h3 className="font-display text-2xl font-medium tracking-tight sm:text-3xl">
            Receba nossos Insights mensais
          </h3>
          <p className="mx-auto mt-3 max-w-lg text-sm text-muted-foreground sm:text-base">
            Uma newsletter curta, sem ruído. Apenas o que merece sua atenção.
          </p>
          <form className="mx-auto mt-6 flex max-w-md flex-col gap-3 sm:flex-row">
            <input
              type="email"
              required
              placeholder="seu@email.com"
              className="flex-1 rounded-full border border-border bg-[color:var(--surface-2)] px-5 py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-[color:var(--life)]/60"
            />
            <button
              type="submit"
              className="rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background"
            >
              Assinar
            </button>
          </form>
        </div>
      </section>
    </SiteShell>
  );
}

function ContentCard({ item }: { item: ConteudoItem }) {
  return (
    <article className="group flex flex-col overflow-hidden rounded-3xl glass-card transition-all hover:-translate-y-1 hover:border-[color:var(--life)]/40">
      <div className="relative aspect-[16/10] overflow-hidden">
        <img
          src={item.imagem}
          alt={item.titulo}
          loading="lazy"
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
        {item.categoria === "podcast" && (
          <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-t from-black/50 to-transparent">
            <span className="grid h-14 w-14 place-items-center rounded-full bg-white/90 text-black shadow-lg">
              <Play className="h-5 w-5 fill-current" />
            </span>
          </div>
        )}
        {item.categoria === "noticia" && item.novo && (
          <span className="absolute left-4 top-4 inline-flex items-center gap-1 rounded-full bg-[color:var(--life)] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-background">
            <Sparkles className="h-3 w-3" /> Novo
          </span>
        )}
      </div>

      <div className="flex flex-1 flex-col p-6 sm:p-7">
        <CardMeta item={item} />

        <h3 className="mt-4 font-display text-lg font-medium leading-snug tracking-tight sm:text-xl">
          {item.titulo}
        </h3>
        <p className="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">
          {item.resumo}
        </p>

        {item.categoria === "case" && item.resultados && (
          <ul className="mt-4 space-y-1.5">
            {item.resultados.map((r) => (
              <li
                key={r}
                className="flex items-start gap-2 text-xs text-foreground/80"
              >
                <span className="mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-[color:var(--life)]" />
                {r}
              </li>
            ))}
          </ul>
        )}

        <CardFooter item={item} />
      </div>
    </article>
  );
}

function CardMeta({ item }: { item: ConteudoItem }) {
  if (item.categoria === "case") {
    return (
      <span className="rounded-full border border-[color:var(--life)]/30 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] text-[color:var(--life)] self-start">
        Case
      </span>
    );
  }

  if (item.categoria === "podcast") {
    return (
      <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[color:var(--life)]">
        <span className="rounded-full border border-[color:var(--life)]/30 px-3 py-1 font-medium">
          Podcast
        </span>
        {item.duracao && (
          <span className="text-muted-foreground">{item.duracao}</span>
        )}
      </div>
    );
  }

  // artigo / noticia
  return (
    <div className="flex items-center gap-3 text-[11px] uppercase tracking-[0.18em]">
      <span className="rounded-full border border-[color:var(--life)]/30 px-3 py-1 font-medium text-[color:var(--life)]">
        {item.subcategoria ?? (item.categoria === "noticia" ? "Notícia" : "Artigo")}
      </span>
      <span className="text-muted-foreground">{formatDate(item.data)}</span>
    </div>
  );
}

function CardFooter({ item }: { item: ConteudoItem }) {
  if (item.categoria === "case") {
    return (
      <button className="mt-6 inline-flex items-center justify-center gap-2 rounded-full border border-border px-4 py-2.5 text-xs font-medium uppercase tracking-[0.16em] transition-colors group-hover:border-[color:var(--life)]/50 group-hover:text-[color:var(--life-glow)]">
        Ver case <ArrowUpRight className="h-3.5 w-3.5" />
      </button>
    );
  }

  if (item.categoria === "podcast") {
    return (
      <div className="mt-6 flex items-center justify-between gap-3">
        <span className="text-xs text-muted-foreground">
          {item.convidado ? `Com ${item.convidado}` : formatDate(item.data)}
        </span>
        <button className="inline-flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-xs font-medium text-background">
          <Play className="h-3 w-3 fill-current" /> Ouvir episódio
        </button>
      </div>
    );
  }

  if (item.categoria === "artigo") {
    return (
      <div className="mt-6 flex items-center justify-between text-xs uppercase tracking-[0.16em] text-muted-foreground">
        <span>{item.tempoLeitura} · leitura</span>
        <ArrowUpRight className="h-4 w-4 transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-foreground" />
      </div>
    );
  }

  // notícia
  return (
    <div className="mt-6 flex items-center justify-end">
      <ArrowUpRight className="h-4 w-4 text-muted-foreground transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-foreground" />
    </div>
  );
}