import Link from "next/link";
import { Play, MapPin, Clock, ArrowRight, ArrowUpRight, Quote } from "lucide-react";
import { pick, type Dictionary } from "@/i18n";
import { formatDate, formatTimeRange } from "@/lib/format";
import { Badge } from "@/components/ui/badge";
import { SanityImage } from "./sanity-image";
import { FacebookIcon, InstagramIcon } from "./icons";

/* eslint-disable @typescript-eslint/no-explicit-any */

/* ---------------------------------------------------------------- Blog --- */

export function PostCard({
  post,
  locale,
  dict,
  href,
}: {
  post: any;
  locale: string;
  dict: Dictionary;
  href?: string;
}) {
  return (
    <Link
      href={href ?? `/${locale}/blog/${post.slug?.current}/`}
      className="group flex flex-col overflow-hidden rounded-2xl border border-line bg-surface shadow-card lift"
    >
      <div className="relative aspect-[16/10] overflow-hidden bg-brand/5">
        {post.coverImage && (
          <SanityImage
            image={post.coverImage}
            alt={pick(post.title, locale) || ""}
            sizes="(min-width: 768px) 33vw, 100vw"
            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
          />
        )}
        <span className="absolute left-3 top-3">
          <Badge variant="soft">{formatDate(post.publishedAt, locale)}</Badge>
        </span>
      </div>
      <div className="flex flex-1 flex-col p-6">
        <h3 className="text-xl leading-snug transition group-hover:text-brand">
          {pick(post.title, locale) ?? post.title}
        </h3>
        <p className="mt-2 line-clamp-2 text-ink-soft">
          {pick(post.excerpt, locale) ?? post.excerpt}
        </p>
        <div className="mt-5 flex items-center justify-between pt-1">
          {post.author?.name ? (
            <span className="flex items-center gap-2 text-sm text-muted">
              {post.author.image && (
                <span className="h-7 w-7 overflow-hidden rounded-full bg-brand/10">
                  <SanityImage
                    image={post.author.image}
                    alt={post.author.name}
                    widths={[56, 84]}
                    sizes="28px"
                    className="h-full w-full object-cover"
                  />
                </span>
              )}
              {post.author.name}
            </span>
          ) : (
            <span />
          )}
          <span className="inline-flex items-center gap-1 text-sm font-semibold text-brand-bright transition group-hover:gap-2">
            {dict.cta.readMore}
            <ArrowRight className="size-4" />
          </span>
        </div>
      </div>
    </Link>
  );
}

/* Large featured article — used in the home "from the blog" + blog hero. */
export function FeaturedPostCard({
  post,
  locale,
  dict,
}: {
  post: any;
  locale: string;
  dict: Dictionary;
}) {
  return (
    <Link
      href={`/${locale}/blog/${post.slug?.current}/`}
      className="group flex h-full flex-col overflow-hidden rounded-3xl border border-line bg-surface shadow-card lift"
    >
      <div className="relative aspect-[16/10] overflow-hidden bg-brand/5">
        {post.coverImage && (
          <SanityImage
            image={post.coverImage}
            alt={pick(post.title, locale) || ""}
            sizes="(min-width: 1024px) 40vw, 100vw"
            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
          />
        )}
        <span className="absolute left-4 top-4">
          <Badge>{dict.blog.featured}</Badge>
        </span>
      </div>
      <div className="flex flex-1 flex-col p-7 sm:p-8">
        <p className="text-xs font-semibold uppercase tracking-[0.14em] text-brand-bright">
          {formatDate(post.publishedAt, locale)}
        </p>
        <h3 className="mt-2 text-balance text-2xl leading-tight transition group-hover:text-brand sm:text-3xl">
          {pick(post.title, locale)}
        </h3>
        <p className="mt-3 line-clamp-3 text-ink-soft">
          {pick(post.excerpt, locale)}
        </p>
        <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-brand transition group-hover:gap-3">
          {dict.cta.readMore}
          <ArrowRight className="size-4" />
        </span>
      </div>
    </Link>
  );
}

/* Compact list row for the "latest posts" column. */
export function PostListItem({
  post,
  locale,
  dict,
}: {
  post: any;
  locale: string;
  dict: Dictionary;
}) {
  return (
    <Link
      href={`/${locale}/blog/${post.slug?.current}/`}
      className="group flex items-start gap-4 rounded-2xl p-4 transition hover:bg-bg"
    >
      <div className="relative hidden h-20 w-24 shrink-0 overflow-hidden rounded-xl bg-brand/5 sm:block">
        {post.coverImage && (
          <SanityImage
            image={post.coverImage}
            alt={pick(post.title, locale) || ""}
            widths={[120, 240]}
            sizes="96px"
            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
          />
        )}
      </div>
      <div className="min-w-0 flex-1">
        <p className="text-xs font-semibold uppercase tracking-[0.12em] text-brand-bright">
          {post.author?.name ? `${dict.blog.by} ${post.author.name} · ` : ""}
          {formatDate(post.publishedAt, locale)}
        </p>
        <h4 className="mt-1.5 line-clamp-2 text-lg font-bold leading-snug tracking-tight transition group-hover:text-brand">
          {pick(post.title, locale)}
        </h4>
      </div>
      <ArrowUpRight className="mt-1 size-5 shrink-0 text-muted transition group-hover:text-brand-bright" />
    </Link>
  );
}

/* --------------------------------------------------------------- Events --- */

export function EventCard({
  event,
  locale,
  href,
}: {
  event: any;
  locale: string;
  dict?: Dictionary;
  href?: string;
}) {
  const d = event.startDateTime ? new Date(event.startDateTime) : null;
  const intl = locale === "fr" ? "fr-FR" : "en-GB";
  return (
    <Link
      href={href ?? `/${locale}/events/${event.slug?.current}/`}
      className="group flex gap-5 rounded-2xl border border-line bg-surface p-5 shadow-card lift"
    >
      <div className="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded-xl bg-brand text-bg">
        <span className="font-display text-2xl font-bold leading-none">
          {d ? d.toLocaleDateString(intl, { day: "2-digit" }) : "–"}
        </span>
        <span className="mt-1 text-[10px] font-semibold uppercase tracking-wide text-white/75">
          {d ? d.toLocaleDateString(intl, { month: "short" }) : ""}
        </span>
      </div>
      <div className="min-w-0 flex-1 self-center">
        <h3 className="truncate text-lg transition group-hover:text-brand">
          {pick(event.title, locale) ?? event.title}
        </h3>
        <p className="mt-1 flex items-center gap-1.5 text-sm text-ink-soft">
          <Clock className="size-3.5 text-brand-bright" />
          {formatTimeRange(event.startDateTime, event.endDateTime, locale)}
        </p>
        {event.location && (
          <p className="mt-1 flex items-center gap-1.5 truncate text-sm text-muted">
            <MapPin className="size-3.5 text-brand-bright" />
            {event.location}
          </p>
        )}
      </div>
    </Link>
  );
}

/* Big highlighted "happening next" event — image + details, side by side. */
export function FeaturedEventCard({
  event,
  locale,
  dict,
}: {
  event: any;
  locale: string;
  dict: Dictionary;
}) {
  const d = event.startDateTime ? new Date(event.startDateTime) : null;
  const intl = locale === "fr" ? "fr-FR" : "en-GB";
  return (
    <div className="group grid overflow-hidden rounded-3xl border border-line bg-surface shadow-card lg:grid-cols-2">
      <div className="relative min-h-64 overflow-hidden bg-brand-deep">
        {event.image ? (
          <SanityImage
            image={event.image}
            alt={pick(event.title, locale) || ""}
            sizes="(min-width: 1024px) 50vw, 100vw"
            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
          />
        ) : (
          <div aria-hidden className="radiance animate-gradient absolute inset-0 opacity-80" />
        )}
        {d && (
          <div className="absolute left-5 top-5 flex flex-col items-center rounded-2xl bg-bg/95 px-4 py-3 text-brand shadow-lg">
            <span className="font-display text-3xl font-bold leading-none">
              {d.toLocaleDateString(intl, { day: "2-digit" })}
            </span>
            <span className="mt-1 text-xs font-semibold uppercase tracking-wide text-brand-bright">
              {d.toLocaleDateString(intl, { month: "short" })}
            </span>
          </div>
        )}
      </div>
      <div className="flex flex-col justify-center gap-4 p-8 sm:p-10">
        <Badge variant="soft" className="w-fit">
          {dict.events.next}
        </Badge>
        <h3 className="text-balance text-2xl tracking-tight sm:text-3xl">
          {pick(event.title, locale)}
        </h3>
        {pick(event.summary, locale) && (
          <p className="line-clamp-3 text-ink-soft">{pick(event.summary, locale)}</p>
        )}
        <div className="mt-1 space-y-1.5 text-sm">
          <p className="flex items-center gap-2 text-ink-soft">
            <Clock className="size-4 text-brand-bright" />
            {formatDate(event.startDateTime, locale, {
              weekday: "long",
              day: "numeric",
              month: "long",
            })}
            {" · "}
            {formatTimeRange(event.startDateTime, event.endDateTime, locale)}
          </p>
          {event.location && (
            <p className="flex items-center gap-2 text-muted">
              <MapPin className="size-4 text-brand-bright" />
              {event.location}
            </p>
          )}
        </div>
        <Link
          href={`/${locale}/events/${event.slug?.current}/`}
          className="mt-2 inline-flex w-fit items-center gap-2 rounded-sm bg-brand px-6 py-3 text-sm font-semibold text-bg transition hover:bg-brand-deep"
        >
          {dict.cta.learnMore}
          <ArrowRight className="size-4" />
        </Link>
      </div>
    </div>
  );
}

/* -------------------------------------------------------------- Sermons --- */

export function SermonCard({
  sermon,
  locale,
  dict,
}: {
  sermon: any;
  locale: string;
  dict: Dictionary;
}) {
  return (
    <Link
      href={`/${locale}/sermons/${sermon.slug?.current}/`}
      className="group overflow-hidden rounded-2xl border border-line bg-surface shadow-card lift"
    >
      <div className="relative aspect-video overflow-hidden bg-brand-deep">
        {sermon.poster && (
          <SanityImage
            image={sermon.poster}
            alt={pick(sermon.title, locale) || ""}
            sizes="(min-width: 768px) 33vw, 100vw"
            className="h-full w-full object-cover opacity-90 transition duration-700 group-hover:scale-105 group-hover:opacity-100"
          />
        )}
        <span className="absolute inset-0 bg-gradient-to-t from-brand-deep/60 to-transparent" />
        <span className="absolute inset-0 grid place-items-center">
          <span className="grid h-14 w-14 place-items-center rounded-full bg-bg/95 text-brand shadow-lg transition duration-300 group-hover:scale-110 group-hover:animate-pulse-glow">
            <Play className="size-5 fill-current" />
          </span>
        </span>
        {(sermon.videoUrl || sermon.audioUrl) && (
          <Badge variant="ink" className="absolute left-3 top-3">
            {sermon.videoUrl ? dict.cta.watch : dict.cta.listen}
          </Badge>
        )}
      </div>
      <div className="p-6">
        <p className="text-xs font-semibold uppercase tracking-[0.14em] text-brand-bright">
          {formatDate(sermon.date, locale)}
        </p>
        <h3 className="mt-2 text-xl leading-snug transition group-hover:text-brand">
          {pick(sermon.title, locale)}
        </h3>
        {sermon.speaker?.name && (
          <p className="mt-1 text-sm text-muted">{sermon.speaker.name}</p>
        )}
      </div>
    </Link>
  );
}

/* ------------------------------------------------------------ Leadership --- */

export function LeaderCard({
  leader,
  locale,
  dict,
}: {
  leader: any;
  locale: string;
  dict: Dictionary;
}) {
  const gallery = leader.galleryUrl;
  const social = leader.social || {};
  const inner = (
    <>
      <div className="relative aspect-[4/5] overflow-hidden rounded-2xl bg-brand/5">
        {leader.image && (
          <SanityImage
            image={leader.image}
            alt={leader.name || ""}
            sizes="(min-width: 768px) 25vw, 50vw"
            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
          />
        )}
        <span className="absolute inset-0 bg-gradient-to-t from-brand-deep/70 via-transparent to-transparent opacity-0 transition group-hover:opacity-100" />
        {(social.facebook || social.instagram) && (
          <span className="absolute inset-x-4 bottom-4 flex translate-y-2 items-center gap-2 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100">
            {social.facebook && (
              <span className="grid h-9 w-9 place-items-center rounded-full bg-bg/90 text-brand">
                <FacebookIcon className="size-4" />
              </span>
            )}
            {social.instagram && (
              <span className="grid h-9 w-9 place-items-center rounded-full bg-bg/90 text-brand">
                <InstagramIcon className="size-4" />
              </span>
            )}
          </span>
        )}
        {gallery && (
          <span className="absolute right-3 top-3 inline-flex items-center gap-1 rounded-full bg-bg/90 px-3 py-1 text-xs font-semibold text-brand opacity-0 backdrop-blur transition group-hover:opacity-100">
            {dict.cta.viewGallery} →
          </span>
        )}
      </div>
      <h3 className="mt-4 text-lg">{leader.name}</h3>
      <p className="text-sm font-medium text-brand-bright">
        {pick(leader.role, locale)}
      </p>
    </>
  );
  return gallery ? (
    <a href={gallery} target="_blank" rel="noopener noreferrer" className="group block">
      {inner}
    </a>
  ) : (
    <div className="group block">{inner}</div>
  );
}

/* ----------------------------------------------------------- Ministries --- */

export function MinistryCard({
  ministry,
  locale,
  dict,
}: {
  ministry: any;
  locale: string;
  dict: Dictionary;
}) {
  const name = pick(ministry.title, locale) ?? ministry.name;
  const summary = pick(ministry.summary, locale) ?? ministry.desc;
  const meets = pick(ministry.meets, locale);
  return (
    <div className="group relative flex flex-col overflow-hidden rounded-2xl border border-line bg-surface p-7 shadow-card lift">
      <span
        aria-hidden
        className="absolute inset-x-0 top-0 h-1 origin-left scale-x-0 bg-brand transition-transform duration-500 group-hover:scale-x-100"
      />
      <div className="flex items-center gap-4">
        {ministry.image ? (
          <span className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-brand/5">
            <SanityImage
              image={ministry.image}
              alt={name || ""}
              widths={[112, 168]}
              sizes="56px"
              className="h-full w-full object-cover"
            />
          </span>
        ) : (
          <span className="grid h-14 w-14 shrink-0 place-items-center rounded-xl bg-brand/8 text-2xl transition group-hover:scale-110">
            {ministry.icon || "✛"}
          </span>
        )}
        <h3 className="text-xl leading-tight">{name}</h3>
      </div>
      {summary && <p className="mt-4 flex-1 text-ink-soft">{summary}</p>}
      {(meets || ministry.leader?.name) && (
        <dl className="mt-5 space-y-1 border-t border-line pt-4 text-sm">
          {meets && (
            <div className="flex gap-2">
              <dt className="font-semibold text-brand-bright">{dict.ministries.meets}:</dt>
              <dd className="text-ink-soft">{meets}</dd>
            </div>
          )}
          {ministry.leader?.name && (
            <div className="flex gap-2">
              <dt className="font-semibold text-brand-bright">{dict.ministries.ledBy}:</dt>
              <dd className="text-ink-soft">{ministry.leader.name}</dd>
            </div>
          )}
        </dl>
      )}
    </div>
  );
}

/* ------------------------------------------------------------ Testimony --- */

export function TestimonyCard({
  testimony,
  locale,
}: {
  testimony: any;
  locale: string;
}) {
  return (
    <figure className="flex w-80 shrink-0 flex-col rounded-2xl border border-bg/15 bg-bg/5 p-7 backdrop-blur">
      <Quote className="size-7 text-white/30" />
      <blockquote className="mt-3 flex-1 text-bg/90">
        {pick(testimony.quote, locale)}
      </blockquote>
      <figcaption className="mt-5 border-t border-bg/15 pt-4 text-sm font-semibold uppercase tracking-wide text-white/70">
        {testimony.name}
        {testimony.role ? ` · ${pick(testimony.role, locale)}` : ""}
      </figcaption>
    </figure>
  );
}