"use client";

/**
 * A YouTube link, played in place.
 *
 * The raw URL is stripped from the text — showing both the link and the
 * player says the same thing twice, and the link is the less useful half.
 */

/** The video id in any of YouTube's URL shapes, or null. */
export function youtubeId(text: string): string | null {
  const match = text.match(
    /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([\w-]{11})/
  );
  return match?.[1] ?? null;
}

/** An Instagram reel or post id. */
export function instagramId(text: string): string | null {
  // Their shapes:
  //   instagram.com/reel/AbC123        instagram.com/p/AbC123
  //   instagram.com/share/reel/AbC123  (what the Share button gives)
  //   instagram.com/username/reel/AbC123
  const m = text.match(
    /instagram\.com\/(?:share\/)?(?:[\w.]+\/)?(?:reels?|p|tv)\/([\w-]+)/i
  );
  return m?.[1] ?? null;
}

/** A Facebook video URL, which their player takes whole. */
export function facebookVideo(text: string): string | null {
  // Facebook hands out several shapes and they all have to be caught:
  //   facebook.com/name/videos/123
  //   facebook.com/share/p/AbC123      (what the Share button gives)
  //   facebook.com/share/v/AbC123
  //   facebook.com/reel/123
  //   facebook.com/watch?v=123
  //   facebook.com/permalink.php?story_fbid=...
  //   fb.watch/AbC123
  const m = text.match(
    /https?:\/\/(?:www\.|web\.|m\.|business\.)?facebook\.com\/(?:[^\s/]+\/videos?\/[^\s]+|share\/[pvr]\/[\w-]+\/?|reel\/[\w-]+\/?|watch\/?\?v=[\w-]+|permalink\.php\?[^\s]+|story\.php\?[^\s]+)|https?:\/\/fb\.watch\/[\w-]+\/?/i
  );
  return m?.[0] ?? null;
}

/** An Instagram post, played in place. Tall, like a reel. */
export function InstagramEmbed({ id }: { id: string }) {
  return (
    <div className="pv-frame">
      {/* Filmed for a phone, so it's tall. A soft field behind it rather
          than an empty column either side. */}
      <span className="pv-glow" aria-hidden />

      <div className="pv-embed instagram">
      <iframe
        src={`https://www.instagram.com/p/${id}/embed`}
        title="Instagram post"
        allow="encrypted-media; picture-in-picture"
        allowFullScreen
          scrolling="no"
          loading="lazy"
        />
      </div>
    </div>
  );
}

/** A Facebook video, played in place. */
export function FacebookEmbed({ url }: { url: string }) {
  // A /share/p/ link is a post, which may or may not hold a video, and
  // their video plugin refuses one. The post plugin takes either and
  // shows whatever's in it — the honest choice when the link doesn't say.
  const isPost = /\/share\/p\/|permalink\.php/.test(url);
  const plugin = isPost ? "post.php" : "video.php";

  return (
    <div className={`pv-embed ${isPost ? "fb-post" : ""}`}>
      <iframe
        src={
          `https://www.facebook.com/plugins/${plugin}` +
          `?href=${encodeURIComponent(url)}` +
          // Their plugins need a width, and refuse quietly without one.
          "&show_text=false&width=560&height=315"
        }
        title="Facebook video"
        allow="encrypted-media; picture-in-picture; web-share"
        allowFullScreen
        scrolling="no"
        loading="lazy"
      />
    </div>
  );
}

/** The text with any of the video links taken out. */
export function withoutYoutube(text: string): string {
  return text
    .replace(
      /https?:\/\/(?:www\.|m\.)?(?:youtube\.com\/\S+|youtu\.be\/\S+|instagram\.com\/\S+|facebook\.com\/\S+|fb\.watch\/\S+|fb\.watch\/\S+)/gi,
      ""
    )
    .replace(/\n{3,}/g, "\n\n")
    .trim();
}

export function PostVideoEmbed({ id }: { id: string }) {
  return (
    <div className="pv-embed">
      <iframe
        src={`https://www.youtube.com/embed/${id}`}
        title="YouTube video"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        loading="lazy"
      />
    </div>
  );
}