"use client";

import { useState } from "react";
import { Check } from "lucide-react";
import { Link } from "@/i18n/navigation";
import VideoPlayer from "@/components/shared/VideoPlayer";

export interface VideoTake {
  /** Base name under /public/videos, without extension. */
  fileName: string;
  /** Name shown on the presenter switcher. */
  label: string;
  /** Run length shown on the poster, e.g. "0:50". */
  durationLabel?: string;
  /** True when a WebVTT caption track sits next to the video. */
  hasCaptions?: boolean;
  /** Accessible description of this take for screen readers. */
  videoLabel: string;
}

interface VideoBlockProps {
  /** Section id, for anchor links from the header or hero. */
  id: string;
  /**
   * One entry per recording. With more than one, a switcher appears so the
   * visitor can pick the presenter they would rather listen to — the takes are
   * the same introduction, so only one is ever watched.
   */
  takes: VideoTake[];
  /** Label above the presenter switcher, e.g. "Choose your presenter". */
  takesLabel?: string;
  /** Caption under the player, e.g. the audio language. */
  mediaNote?: string;
  /** Loads the poster eagerly. Use for the first video block on the page. */
  priority?: boolean;
  eyebrow: string;
  heading: string;
  body: string;
  /** Scannable benefits — what a visitor takes away without pressing play. */
  bullets?: string[];
  ctaLabel: string;
  ctaHref: string;
  secondaryLabel?: string;
  secondaryHref?: string;
  /** Small print under the CTA — trial terms. */
  footnote?: string;
  /** Shown under the video when a real person is speaking on camera. */
  attribution?: { name: string; role: string };
  playLabel: string;
  /** Tints the section so two video blocks on one page don't look identical. */
  tone?: "light" | "muted";
}

/**
 * Click-to-load video section. The poster is a plain image until the visitor
 * presses play, so a multi-megabyte file never competes with the hero for
 * bandwidth — the <video> element is only mounted on demand.
 *
 * Most visitors will not press play, so the copy beside the player has to carry
 * the argument on its own: heading, one paragraph, scannable benefits, CTA.
 */
export default function VideoBlock({
  id,
  takes,
  takesLabel,
  mediaNote,
  priority = false,
  eyebrow,
  heading,
  body,
  bullets,
  ctaLabel,
  ctaHref,
  secondaryLabel,
  secondaryHref,
  footnote,
  attribution,
  playLabel,
  tone = "light",
}: VideoBlockProps) {
  const [takeIndex, setTakeIndex] = useState(0);
  const take = takes[takeIndex];

  return (
    <section
      id={id}
      aria-labelledby={`${id}-heading`}
      className={tone === "muted" ? "py-16 bg-gray-50" : "py-16 bg-white"}
    >
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-14 items-center">
          {/* Player */}
          <div>
            {/* Keyed by file so switching presenter resets to the poster —
                otherwise the new take would start playing unannounced. */}
            <VideoPlayer
              key={take.fileName}
              fileName={take.fileName}
              videoLabel={take.videoLabel}
              playLabel={playLabel}
              hasCaptions={take.hasCaptions}
              durationLabel={take.durationLabel}
              priority={priority}
            />

            {takes.length > 1 && (
              <div className="mt-4">
                {takesLabel && (
                  <p className="mb-2 text-xs font-medium text-gray-500">{takesLabel}</p>
                )}
                <div
                  role="tablist"
                  aria-label={takesLabel}
                  className="inline-flex gap-1 rounded-full bg-gray-100 p-1"
                >
                  {takes.map((option, index) => (
                    <button
                      key={option.fileName}
                      type="button"
                      role="tab"
                      aria-selected={index === takeIndex}
                      onClick={() => setTakeIndex(index)}
                      className={`rounded-full px-4 py-1.5 text-sm font-medium transition cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2E8EBE] ${
                        index === takeIndex
                          ? "bg-white text-gray-900 shadow-sm"
                          : "text-gray-500 hover:text-gray-700"
                      }`}
                    >
                      {option.label}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {attribution && (
              <p className="mt-3 text-sm text-gray-600">
                <span className="font-semibold text-gray-900">{attribution.name}</span>
                {attribution.role ? ` — ${attribution.role}` : null}
              </p>
            )}
            {mediaNote && <p className="mt-2 text-xs text-gray-400">{mediaNote}</p>}
          </div>

          {/* Copy + CTA */}
          <div>
            <p className="text-xs font-semibold uppercase tracking-wide text-[#2E8EBE]">
              {eyebrow}
            </p>
            <h2
              id={`${id}-heading`}
              className="mt-2 text-2xl sm:text-[32px] font-bold leading-tight text-gray-900"
            >
              {heading}
            </h2>
            <p className="mt-4 text-[15px] text-gray-600 leading-relaxed">{body}</p>

            {bullets && bullets.length > 0 && (
              <ul className="mt-6 space-y-3">
                {bullets.map((bullet) => (
                  <li key={bullet} className="flex items-start gap-3">
                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#E8F4F8]">
                      <Check className="h-3 w-3 text-[#2E8EBE]" strokeWidth={3} aria-hidden="true" />
                    </span>
                    <span className="text-[15px] font-medium text-gray-800">{bullet}</span>
                  </li>
                ))}
              </ul>
            )}

            <div className="mt-7 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
              <Link
                href={ctaHref}
                className="inline-flex items-center justify-center rounded-lg bg-[#3B9EC9] px-7 py-3.5 text-sm font-semibold text-white shadow-sm transition hover:bg-[#2D8AB5] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2E8EBE]"
              >
                {ctaLabel}
              </Link>
              {secondaryLabel && secondaryHref && (
                <Link
                  href={secondaryHref}
                  className="text-sm font-semibold text-[#2E8EBE] underline underline-offset-4 transition hover:text-[#1F6B92] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2E8EBE]"
                >
                  {secondaryLabel}
                </Link>
              )}
            </div>

            {footnote && <p className="mt-3 text-[13px] text-gray-500">{footnote}</p>}
          </div>
        </div>
      </div>
    </section>
  );
}