import { useTranslation } from "react-i18next";
import { CheckCircle2, Circle, Film, Info, ListPlus, Play, Star, Tv2 } from "lucide-react";
import { type CSSProperties } from "react";
import { formatRuntime } from "../lib/format";
import { Carousel } from "./ui/Carousel";
import type { PlexCard, PlexCastMember, PlexFilters, PlexSeasonDetail } from "../lib/api";
import { navItemAttrs } from "../lib/listNav";
import { PLAYABLE_TINT, playableClass } from "./plexPlayable";

// Presentational Plex cards + strips, split out of PlexBrowse (all purely prop-driven, no shared
// state). Rendered by the browse grid, the person page, and the series show/season views.

// The reveal class for a status pill (watched / in-progress) that shares a corner with a hover-reveal
// control (the watched-toggle). When that control is present it takes over on touch, so the pill yields
// via `.reveal-idle` (hidden on touch, faded on hover); when there's no such control the pill is the
// sole indicator and just fades on hover. (The single-episode card, where the pill is itself the
// full-size watched marker with no fade, keeps its own inline rule.)
const swapBadgeReveal = (hasControl: boolean): string =>
  hasControl ? "reveal-idle" : "group-hover:opacity-0";

// Watched-toggle icon. Distinguishes state by SHAPE (a filled check vs an empty circle), not color
// alone — on touch the toggle is the only surviving watched indicator (the text pill is hidden), so a
// green-vs-white CheckCircle2 would be a use-of-color (WCAG 1.4.1) gap. Watched = CheckCircle2 (green),
// not-watched = Circle (empty, white).
function WatchedIcon({ watched }: { watched: boolean }) {
  return watched ? (
    <CheckCircle2 className="w-4 h-4 text-success" />
  ) : (
    <Circle className="w-4 h-4 text-white" />
  );
}

export function PlexPosterCard({
  card,
  onOpen,
  onInfo,
  onToggleWatched,
  menuProps,
  navIndex,
}: {
  card: PlexCard;
  onOpen: () => void;
  onInfo: () => void;
  onToggleWatched: (c: PlexCard) => void;
  /** Right-click / long-press props for the GRID's one context menu (E24 S3 — the comfort pin).
   *  A function of the card rather than a ready-made object, so every card surface in the app takes
   *  `menuProps={menu.triggerProps}` and reads the same at every call site. */
  menuProps?: (c: PlexCard) => Record<string, unknown>;
  /** Position in a keyboard-walkable grid or rail (lib/listNav); the poster is what Enter opens. */
  navIndex?: number;
}) {
  const { t } = useTranslation();
  const inProgress = (card.position_seconds ?? 0) > 0 && card.status !== "watched";
  const isPlayable = card.type !== "show"; // movies/episodes play; shows open the drill-down
  const watchedLabel = card.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched");
  const runtime = formatRuntime(card.duration_seconds);
  const pct =
    inProgress && card.duration_seconds
      ? Math.min(100, Math.round(((card.position_seconds ?? 0) / card.duration_seconds) * 100))
      : 0;
  return (
    <div
      className="group text-left"
      {...menuProps?.(card)}
      {...(navIndex !== undefined && navItemAttrs(navIndex, card.title))}
      // content-visibility keeps off-screen posters cheap to render (smoother long-list scroll).
      style={{ contentVisibility: "auto", containIntrinsicSize: "auto 300px" } as CSSProperties}
    >
      <div
        onClick={onOpen}
        role="button"
        tabIndex={0}
        data-nav-open=""
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onOpen();
          }
        }}
        className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200 cursor-pointer"
      >
        <img
          src={card.thumb}
          alt=""
          loading="lazy"
          decoding="async"
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
        />
        {/* Playable-cost tint (always shown — a quick "will it direct-play" cue). z-20 keeps the dot
            ABOVE the full-card hover-reveal overlay below (absolute inset-0, no pointer-events-none):
            without it the overlay sits on top and swallows the cursor, so the dot's native `title`
            tooltip never fired on hover (a regression once the reveal overlay was added). */}
        {card.playable &&
          (() => {
            const cls = playableClass(card.playable, card.transcode_hw);
            return (
              <span
                role="img"
                aria-label={t(`plex.playable.${cls}`)}
                className={`absolute top-1.5 left-1.5 z-20 w-2 h-2 rounded-full ring-2 ring-black/40 ${PLAYABLE_TINT[cls] ?? "bg-gray-400"}`}
                title={t(`plex.playable.${cls}`)}
              />
            );
          })()}
        {/* Rest-state watched badge (top-right). Yields to the hover quick-actions on a playable card
            (reveal-idle: gone on touch where the toggle is always shown); a watched show keeps it. */}
        {card.status === "watched" && (
          <span
            className={`pointer-events-none absolute top-1.5 right-1.5 text-3xs bg-black/70 text-white px-1.5 py-0.5 rounded-sm ${swapBadgeReveal(
              isPlayable,
            )}`}
          >
            {t("plex.watched")}
          </span>
        )}
        {/* Aggregate in-progress badge for a partially-watched show. */}
        {card.type === "show" && card.status === "in_progress" && (
          <span className="pointer-events-none absolute top-1.5 right-1.5 text-3xs bg-black/75 text-accent px-1.5 py-0.5 rounded-sm group-hover:opacity-0">
            {t("plex.inProgress")}
          </span>
        )}
        {/* Rest-state bottom badges — hidden on hover, where the scrim takes over the bottom. */}
        {card.type === "show" && card.season_count != null && (
          <span className="pointer-events-none absolute bottom-1.5 left-1.5 text-3xs bg-black/70 text-white px-1.5 py-0.5 rounded-sm transition-opacity group-hover:opacity-0">
            {t("plex.seasons", { count: card.season_count })}
          </span>
        )}
        <span
          className="pointer-events-none absolute bottom-1.5 right-1.5 rounded-sm bg-black/65 p-0.5 text-white/90 transition-opacity group-hover:opacity-0"
          title={t(
            card.type === "show" ? "plex.filter.scopeOpt.show" : "plex.filter.scopeOpt.movie",
          )}
        >
          {card.type === "show" ? <Tv2 className="w-3 h-3" /> : <Film className="w-3 h-3" />}
        </span>

        {/* Hover reveal: a soft dim, a less-flat play ring, and a bottom scrim that slides up with the
            synopsis + rating (the info you'd otherwise click through for). */}
        <div className="absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
          <div className="absolute inset-0 bg-black/25" />
          <div className="absolute inset-x-0 top-[30%] flex justify-center">
            <div
              className="grid h-12 w-12 scale-90 place-items-center rounded-full text-white shadow-xl transition-transform duration-200 group-hover:scale-100"
              style={{
                background:
                  "radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 72%, white), var(--accent))",
                boxShadow:
                  "0 10px 22px -6px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)",
              }}
            >
              <Play className="w-5 h-5 translate-x-px fill-current" />
            </div>
          </div>
          {(card.summary || card.rating != null) && (
            <div className="absolute inset-x-0 bottom-0 translate-y-1.5 bg-gradient-to-t from-black/95 via-black/85 to-transparent p-2.5 transition-transform duration-200 group-hover:translate-y-0">
              <div className="line-clamp-1 text-xs font-semibold leading-snug text-white">
                {card.title}
              </div>
              <div className="mt-0.5 flex items-center gap-1.5 text-2xs text-white/75">
                {(card.year || runtime) && (
                  <span>{[card.year, runtime].filter(Boolean).join(" · ")}</span>
                )}
                {card.rating != null && (
                  <span className="inline-flex items-center gap-0.5 text-amber-300">
                    <Star className="w-3 h-3 fill-current" />
                    {card.rating.toFixed(1)}
                  </span>
                )}
              </div>
              {card.summary && (
                <p className="mt-1 line-clamp-3 text-2xs leading-snug text-white/85">
                  {card.summary}
                </p>
              )}
            </div>
          )}
        </div>

        {/* Quick actions (playable cards): Info + watched toggle — revealed on hover, always on touch. */}
        {isPlayable && (
          <div className="reveal absolute right-1.5 top-1.5 z-10 flex gap-1">
            <button
              onClick={(e) => {
                e.stopPropagation();
                onInfo();
              }}
              title={t("plex.info.title")}
              aria-label={t("plex.info.title")}
              className="rounded-full bg-black/60 p-1 transition hover:bg-black/80"
            >
              <Info className="h-4 w-4 text-white" />
            </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                onToggleWatched(card);
              }}
              title={watchedLabel}
              aria-label={watchedLabel}
              className="rounded-full bg-black/60 p-1 transition hover:bg-black/80"
            >
              <WatchedIcon watched={card.status === "watched"} />
            </button>
          </div>
        )}

        {pct > 0 && (
          <div className="absolute inset-x-0 bottom-0 z-10 h-1 bg-black/40">
            <div className="h-full bg-accent" style={{ width: `${pct}%` }} />
          </div>
        )}
      </div>
      <div
        onClick={onOpen}
        className="mt-1.5 rounded-lg px-2 py-1.5 cursor-pointer"
        style={{ background: "color-mix(in srgb, var(--card) 60%, transparent)" }}
      >
        <div className="text-sm font-medium line-clamp-2 leading-tight min-h-[2lh] hover:text-accent">
          {card.title}
        </div>
        <div className="text-xs text-muted">
          {[card.year, formatRuntime(card.duration_seconds)].filter(Boolean).join(" · ")}
        </div>
      </div>
    </div>
  );
}

export function SeasonCard({
  se,
  onOpen,
  onToggleWatched,
  onAdd,
  navIndex,
}: {
  se: PlexSeasonDetail;
  onOpen: () => void;
  onToggleWatched?: () => void;
  onAdd?: () => void;
  navIndex?: number;
}) {
  const { t } = useTranslation();
  const watched = se.status === "watched";
  const watchedLabel = watched
    ? t("plex.series.markSeasonUnwatched")
    : t("plex.series.markSeasonWatched");
  return (
    <div
      className="group text-left"
      {...(navIndex !== undefined && navItemAttrs(navIndex, se.title))}
    >
      <div
        onClick={onOpen}
        role="button"
        tabIndex={0}
        data-nav-open=""
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onOpen();
          }
        }}
        className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200 cursor-pointer"
      >
        <img
          src={se.thumb}
          alt=""
          loading="lazy"
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
        />
        <div className="absolute inset-0 bg-black/45 opacity-0 group-hover:opacity-100 transition grid place-items-center">
          <div className="flex flex-col items-center gap-1 text-white">
            <Play className="w-9 h-9" fill="currentColor" />
            <span className="text-xs font-medium">{t("plex.openShow")}</span>
          </div>
        </div>
        {/* Quick watched toggle (whole season), on hover. */}
        {onToggleWatched && (
          <button
            onClick={(e) => {
              e.stopPropagation();
              onToggleWatched();
            }}
            title={watchedLabel}
            aria-label={watchedLabel}
            className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 reveal hover:bg-black/80 transition"
          >
            <WatchedIcon watched={watched} />
          </button>
        )}
        {/* Add whole season to a playlist, on hover. */}
        {onAdd && (
          <button
            onClick={(e) => {
              e.stopPropagation();
              onAdd();
            }}
            title={t("plex.playlist.addSeason")}
            aria-label={t("plex.playlist.addSeason")}
            className="absolute bottom-1.5 right-1.5 p-1 rounded-full bg-black/60 reveal hover:bg-black/80 transition"
          >
            <ListPlus className="w-4 h-4 text-white" />
          </button>
        )}
        {watched && (
          <span
            className={`pointer-events-none absolute top-1.5 right-1.5 text-3xs bg-black/70 text-white px-1.5 py-0.5 rounded-sm ${swapBadgeReveal(
              !!onToggleWatched,
            )}`}
          >
            {t("plex.watched")}
          </span>
        )}
        {/* In-progress lives at the top-LEFT (the watched-toggle owns the top-right) and stays visible
            on touch: unlike movie/episode cards, a season has no progress bar, and the always-shown
            toggle reads as unwatched for a partial season — so this badge is the sole in-progress cue
            and must not be a reveal-idle swap-badge (which display:none-s on touch). */}
        {se.status === "in_progress" && (
          <span className="pointer-events-none absolute top-1.5 left-1.5 text-3xs bg-black/75 text-accent px-1.5 py-0.5 rounded-sm">
            {t("plex.inProgress")}
          </span>
        )}
        <span className="absolute bottom-1.5 left-1.5 text-3xs bg-black/70 text-white px-1.5 py-0.5 rounded-sm">
          {t("plex.series.episodeCount", { count: se.episode_count })}
        </span>
      </div>
      <div
        onClick={onOpen}
        className="mt-1.5 rounded-lg px-2 py-1.5 text-sm font-medium line-clamp-2 leading-tight cursor-pointer hover:text-accent"
        style={{ background: "color-mix(in srgb, var(--card) 60%, transparent)" }}
      >
        {se.title}
      </div>
    </div>
  );
}

export function CastStrip({
  cast,
  onFilter,
  onOpenPerson,
}: {
  cast: PlexCastMember[];
  onFilter?: (patch: Partial<PlexFilters>) => void;
  onOpenPerson?: (name: string) => void;
}) {
  const { t } = useTranslation();
  const clickable = !!(onOpenPerson || onFilter);
  return (
    <section
      className="glass-card rounded-2xl p-4 sm:p-5 mb-6"
      style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
    >
      <h2 className="text-sm font-semibold mb-3">{t("plex.info.cast")}</h2>
      <Carousel gap="gap-4" ariaLabel={t("plex.info.cast")} keyboardNav={clickable}>
        {cast.map((c, i) => {
          const inner = (
            <>
              <div
                className={`mx-auto h-20 w-20 overflow-hidden rounded-full border bg-surface ${clickable ? "border-border group-hover/cast:border-accent" : "border-border"}`}
              >
                {c.thumb ? (
                  <img src={c.thumb} alt="" loading="lazy" className="h-full w-full object-cover" />
                ) : (
                  <div className="grid h-full w-full place-items-center opacity-40">
                    {c.name.charAt(0)}
                  </div>
                )}
              </div>
              {/* Name + role are each capped to ONE line (truncate → ellipsis) so every tile has the
                  same text height and the row of circles sits on one baseline regardless of name length. */}
              <div
                className={`mt-1.5 truncate text-xs font-medium leading-tight ${clickable ? "group-hover/cast:text-accent" : ""}`}
                title={c.name}
              >
                {c.name}
              </div>
              {c.role && (
                <div className="truncate text-2xs text-muted" title={c.role}>
                  {c.role}
                </div>
              )}
            </>
          );
          return clickable ? (
            <button
              key={i}
              {...navItemAttrs(i)}
              onClick={() =>
                onOpenPerson ? onOpenPerson(c.name) : onFilter?.({ actors: [c.name] })
              }
              title={
                onOpenPerson
                  ? t("plex.info.viewPerson", { name: c.name })
                  : t("plex.info.filterActor", { name: c.name })
              }
              className="group/cast w-20 shrink-0 text-center"
            >
              {inner}
            </button>
          ) : (
            <div key={i} className="w-20 shrink-0 text-center">
              {inner}
            </div>
          );
        })}
      </Carousel>
    </section>
  );
}

export function RelatedStrip({
  related,
  onOpen,
}: {
  related: PlexCard[];
  onOpen: (id: string) => void;
}) {
  const { t } = useTranslation();
  return (
    <section
      className="glass-card rounded-2xl p-4 sm:p-5 mb-6"
      style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
    >
      <h2 className="text-sm font-semibold mb-3">{t("plex.series.related")}</h2>
      <Carousel gap="gap-3" ariaLabel={t("plex.series.related")} keyboardNav>
        {related.map((r, i) => (
          <button
            key={r.id}
            {...navItemAttrs(i)}
            onClick={() => onOpen(r.id)}
            className="group w-[130px] shrink-0 text-left"
          >
            <div className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200">
              <img
                src={r.thumb}
                alt=""
                loading="lazy"
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
              />
              {r.status === "watched" && (
                <span className="absolute top-1.5 right-1.5 text-3xs bg-black/70 text-white px-1.5 py-0.5 rounded-sm">
                  {t("plex.watched")}
                </span>
              )}
            </div>
            <div className="mt-1.5 text-sm font-medium line-clamp-2 leading-tight min-h-[2lh]">
              {r.title}
            </div>
          </button>
        ))}
      </Carousel>
    </section>
  );
}

export function EpisodeCard({
  ep,
  onPlay,
  onAdd,
  onToggleWatched,
  withShowTitle,
  navIndex,
}: {
  ep: PlexCard;
  onPlay: () => void;
  onAdd?: () => void;
  onToggleWatched?: () => void;
  withShowTitle?: boolean;
  navIndex?: number;
}) {
  const { t } = useTranslation();
  const inProgress = (ep.position_seconds ?? 0) > 0 && ep.status !== "watched";
  const watchedLabel = ep.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched");
  const pct =
    inProgress && ep.duration_seconds
      ? Math.min(100, Math.round(((ep.position_seconds ?? 0) / ep.duration_seconds) * 100))
      : 0;
  return (
    <div className="group" {...(navIndex !== undefined && navItemAttrs(navIndex, ep.title))}>
      <div
        onClick={onPlay}
        role="button"
        tabIndex={0}
        data-nav-open=""
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onPlay();
          }
        }}
        className="relative block w-full aspect-video rounded-xl overflow-hidden bg-card border border-border text-left cursor-pointer"
      >
        <img
          src={ep.thumb}
          alt=""
          loading="lazy"
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
        />
        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition grid place-items-center">
          <Play className="w-9 h-9 text-white" fill="currentColor" />
        </div>
        {/* Quick watched toggle (single episode), on hover. */}
        {onToggleWatched && (
          <button
            onClick={(e) => {
              e.stopPropagation();
              onToggleWatched();
            }}
            title={watchedLabel}
            aria-label={watchedLabel}
            className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 reveal hover:bg-black/80 transition"
          >
            <WatchedIcon watched={ep.status === "watched"} />
          </button>
        )}
        {ep.status === "watched" && (
          <span
            className={`pointer-events-none absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 ${
              onToggleWatched ? "reveal-idle" : ""
            }`}
          >
            <CheckCircle2 className="w-4 h-4 text-success" />
          </span>
        )}
        {pct > 0 && (
          <div className="absolute bottom-0 inset-x-0 h-1 bg-black/40">
            <div className="h-full bg-accent" style={{ width: `${pct}%` }} />
          </div>
        )}
      </div>
      <div
        className="mt-1.5 flex items-start gap-1.5 rounded-lg px-2 py-1.5"
        style={{ background: "color-mix(in srgb, var(--card) 60%, transparent)" }}
      >
        <div className="min-w-0 flex-1">
          {withShowTitle && ep.show_title && (
            <div className="text-2xs text-muted truncate">
              {ep.show_title}
              {ep.season_number != null && ep.episode_number != null
                ? ` · S${ep.season_number}·E${ep.episode_number}`
                : ""}
            </div>
          )}
          <div className="text-sm font-medium leading-tight">
            {!withShowTitle && <span className="text-muted mr-1">{ep.episode_number}.</span>}
            {ep.title}
          </div>
          <div className="text-2xs text-muted mt-0.5">{formatRuntime(ep.duration_seconds)}</div>
        </div>
        {onAdd && (
          <button
            onClick={onAdd}
            title={t("plex.playlist.addEpisode")}
            aria-label={t("plex.playlist.addEpisode")}
            className="shrink-0 rounded-sm p-1 text-muted transition hover:text-accent"
          >
            <ListPlus className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
}