import Link from "next/link";
import Image from "next/image";
import {
  cleanWebinarText,
  getUpcomingWebinars,
  getWebinarImage,
} from "@/lib/webinars";
import CVHeader from "@/components/layout/CVHeader";
import CVFooter from "@/components/layout/CVFooter";
import { MAIN_SITE_URL } from "@/lib/mainSiteUrl";

export const dynamic = "force-dynamic";

export const metadata = {
  title: "Upcoming TESOL Webinars for English Teachers | Cambridge Veritas",
  description:
    "View upcoming Cambridge Veritas TESOL and English teacher webinars, including dates, practical learning outcomes and online registration details.",
  alternates: { canonical: `${MAIN_SITE_URL}/webinars/upcoming-webinars` },
};

function formatDate(dateString) {
  try {
    return new Date(dateString).toLocaleString("en-US", {
      day: "numeric",
      month: "short",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return "Date to be announced";
  }
}

function getExcerpt(text) {
  if (!text)
    return "Join this Cambridge Veritas webinar for focused insights and practical next steps.";

  const clean = cleanWebinarText(text);

  return clean.length > 150
    ? clean.substring(0, 150) + "..."
    : clean;
}

export default async function UpcomingWebinarsPage() {
  const webinars = await getUpcomingWebinars();

  return (
    <div className="min-h-screen bg-[#FDFAF7]">
      <CVHeader showPromotion={false} />

      <main className="max-w-screen overflow-x-hidden bg-[#FDFAF7] text-[#4A141E]">
      {/* Hero */}
      <header className="border-b-4 border-[#D4AF37] bg-gradient-to-r from-[#4A141E] via-[#3B0F18] to-[#4A141E]">
        <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
          <div className="max-w-3xl">
              <div className="inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/8 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-[#E6D3B1]">
              <span className="h-2 w-2 rounded-full bg-[#D4AF37]" />
              Live learning events
            </div>

            <h1 className="mt-5 text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
              Upcoming webinars
            </h1>

            <p className="mt-5 max-w-2xl text-base leading-relaxed text-[#E6D3B1]/80 sm:text-lg">
              Join us for our upcoming webinars and expand your knowledge with
              expert insights and interactive sessions!
            </p>

            <div className="mt-7 flex flex-col gap-3 sm:flex-row">
              <Link
                href="/webinars"
                className="inline-flex items-center justify-center rounded-2xl border border-[#D4AF37]/50 bg-white/10 px-6 py-4 text-sm font-black text-[#E6D3B1] transition hover:bg-white/15"
              >
                All webinars
              </Link>

              <Link
                href="/webinars/past-webinars"
                className="inline-flex items-center justify-center rounded-2xl bg-[#D4AF37] px-6 py-4 text-sm font-black text-[#3B0F18] shadow-lg transition hover:bg-[#E6D3B1]"
              >
                Past webinars
              </Link>
            </div>
          </div>
        </div>
      </header>

      {/* Webinar Listing */}
      <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
        <div className="mb-8 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">
              Upcoming schedule
            </p>

            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">
              Reserve your place in the next session
            </h2>
          </div>

          <div className="rounded-full border border-[#E6D3B1] bg-white px-4 py-2 text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
            {webinars.length}{" "}
            {webinars.length === 1 ? "webinar" : "webinars"}
          </div>
        </div>

        {webinars.length > 0 ? (
          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {webinars.map((webinar) => (
              <article
                key={webinar.id}
                className="group flex h-full flex-col overflow-hidden rounded-2xl border border-[#E6D3B1] bg-white shadow-sm transition hover:border-[#D4AF37] hover:shadow-lg"
              >
                <Link
                  href={`/webinars/upcoming-webinars/${webinar.slug}`}
                  className="flex h-full flex-col"
                >
                  <div className="relative aspect-[16/9] overflow-hidden bg-[#F6EFE9]">
                    <Image
                      src={getWebinarImage(webinar)}
                      alt={webinar.topic}
                      fill
                      className="object-cover transition duration-300 group-hover:scale-105"
                    />
                  </div>

                  <div className="flex flex-1 flex-col p-6">
                    <div className="mb-4 inline-flex w-fit rounded-full bg-[#F6EFE9] px-3 py-1 text-xs font-black uppercase tracking-wide text-[#8B1C1C]">
                      Upcoming
                    </div>

                    <h3 className="text-xl font-black leading-tight text-[#4A141E]">
                      {webinar.topic}
                    </h3>

                    <p className="mt-3 text-sm font-bold text-[#8B1C1C]">
                      {formatDate(webinar.date)}
                    </p>

                    <p className="mt-3 line-clamp-3 flex-1 text-sm leading-relaxed text-[#4A141E]/65">
                      {getExcerpt(webinar.description)}
                    </p>

                    <div className="mt-6 flex items-center justify-between border-t border-[#E6D3B1]/60 pt-4">
                      <span className="text-sm font-black text-[#8B1C1C]">
                        {webinar.registrationLink ? "Register now" : "View details"}
                      </span>

                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-4 w-4 text-[#8B1C1C]"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                      >
                        <path d="M5 12h14" />
                        <path d="m12 5 7 7-7 7" />
                      </svg>
                    </div>
                  </div>
                </Link>
              </article>
            ))}
          </div>
        ) : (
          <div className="rounded-2xl border border-[#E6D3B1] bg-white p-8 text-center">
            <h3 className="text-xl font-black text-[#4A141E]">
              No upcoming webinars right now
            </h3>

            <p className="mx-auto mt-3 max-w-2xl text-sm leading-relaxed text-[#4A141E]/65">
              New sessions will appear here when registration opens. You can
              still explore recorded sessions in the past webinars library.
            </p>

            <Link
              href="/webinars/past-webinars"
              className="mt-6 inline-flex items-center justify-center rounded-2xl bg-[#4A141E] px-6 py-4 text-sm font-black text-white transition hover:bg-[#8B1C1C]"
            >
              Browse past webinars
            </Link>
          </div>
        )}
      </section>
      </main>

      <CVFooter />
    </div>
  );
}