import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { Clock, Play } from "lucide-react";
import { Button } from "@/components/ui/button";
import { listEpisodes } from "@/lib/podcast.functions";

const TITLE = "Episode Archive — Gatavase Live Podcast";
const DESCRIPTION =
  "Browse past Gatavase Live Podcast recordings on AI, fintech, engineering and creative technology across Kampala and Doha.";

export const Route = createFileRoute("/episodes/")({
  head: () => ({
    meta: [
      { title: TITLE },
      { name: "description", content: DESCRIPTION },
      { property: "og:title", content: TITLE },
      { property: "og:description", content: DESCRIPTION },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/episodes" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
    links: [{ rel: "canonical", href: "/episodes" }],
  }),
  component: EpisodesPage,
});

function EpisodesPage() {
  const { data, isLoading } = useQuery({
    queryKey: ["podcast-episodes"],
    queryFn: () => listEpisodes(),
  });
  const episodes = data ?? [];

  return (
    <>
      <section className="hero-surface border-b border-border">
        <div className="mx-auto max-w-6xl px-5 py-16 md:py-20">
          <h1 className="text-4xl font-bold md:text-5xl">
            Episode <span className="text-gradient">archive</span>
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-muted-foreground">
            Every past Gatavase live recording — full video, show notes and guest profiles.
          </p>
          <Button asChild className="mt-7">
            <Link to="/live-podcast">Watch the live stream</Link>
          </Button>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-5 py-14">
        {isLoading && <p className="text-sm text-muted-foreground">Loading episodes…</p>}
        {!isLoading && episodes.length === 0 && (
          <p className="text-sm text-muted-foreground">No recordings published yet.</p>
        )}
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {episodes.map((e) => (
            <article key={e.id} className="panel flex flex-col p-6">
              <p className="font-mono text-xs tracking-wide text-primary uppercase">
                {new Date(e.published_at).toLocaleDateString(undefined, {
                  year: "numeric",
                  month: "short",
                  day: "numeric",
                })}
              </p>
              <h2 className="mt-2 text-lg font-semibold">
                <Link to="/episodes/$slug" params={{ slug: e.slug }} className="hover:text-primary">
                  {e.title}
                </Link>
              </h2>
              <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{e.summary}</p>
              <p className="mt-4 flex items-center gap-2 text-xs text-muted-foreground">
                <Clock className="size-3.5" /> {e.duration_minutes} min
              </p>
              <Button asChild size="sm" variant="outline" className="mt-4 self-start">
                <Link to="/episodes/$slug" params={{ slug: e.slug }}>
                  <Play className="size-3.5" /> Listen / watch
                </Link>
              </Button>
            </article>
          ))}
        </div>
      </section>
    </>
  );
}
