import { Play } from "lucide-react";
import { useRef, useState } from "react";
import { useI18n } from "../../../i18n";
import type { Attachment, Post } from "../../../types/post";
import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
import { useVideoPlayer } from "../overlays/VideoPlayer";
import { autolink } from "../utils/autolink";
import { postDisplayText } from "../utils/postText";

const MAX_VISIBLE = 4;

function formatDuration(sec: number | undefined): string {
  if (!sec || sec <= 0) return "";
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${s.toString().padStart(2, "0")}`;
}

function isVideoAttachment(att: Attachment): boolean {
  return att.kind === "video" || att.mime.startsWith("video/");
}

function videoRatio(att: Attachment) {
  return att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
}

function VideoAttachmentCard({
  postId,
  attachment,
  compact = false,
  overlayCount,
}: {
  postId: string;
  attachment: Attachment;
  compact?: boolean;
  overlayCount?: number;
}) {
  const { openVideo } = useVideoPlayer();
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);
  const posterUrl = attachment.posterUrl ?? attachment.thumbnailUrl;
  const duration = formatDuration(attachment.durationSec);
  const previewVideoUrl = attachment.url.includes("#")
    ? attachment.url
    : `${attachment.url}#t=0.1`;

  return (
    <div
      className={`relative w-full overflow-hidden bg-black ${
        compact
          ? "h-full"
          : "max-h-[220px] rounded-xl min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
      }`}
      style={compact ? undefined : { aspectRatio: videoRatio(attachment) }}
      onClick={() => {
        if (playing) {
          const v = videoRef.current;
          openVideo(attachment, v?.currentTime ?? 0);
        }
      }}
    >
      {playing && !compact ? (
        <video
          ref={videoRef}
          src={attachment.url}
          poster={attachment.posterUrl}
          controls
          playsInline
          autoPlay
          className="absolute inset-0 h-full w-full"
        />
      ) : (
        <>
          {posterUrl ? (
            <img
              src={posterUrl}
              alt=""
              className={`absolute inset-0 h-full w-full object-cover ${
                overlayCount ? "blur-sm scale-105" : ""
              }`}
            />
          ) : (
            <video
              src={previewVideoUrl}
              preload="metadata"
              muted
              playsInline
              className={`absolute inset-0 h-full w-full object-cover ${
                overlayCount ? "blur-sm scale-105" : ""
              }`}
              aria-hidden="true"
            />
          )}
          {!compact ? (
            <AttachmentDownloadPill
              postId={postId}
              attachment={attachment}
              leadingLabel={duration}
            />
          ) : null}
          {overlayCount ? (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                openVideo(attachment, 0);
              }}
              className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white"
              aria-label="Open more videos"
            >
              +{overlayCount}
            </button>
          ) : (
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                if (compact) openVideo(attachment, 0);
                else setPlaying(true);
              }}
              className="absolute inset-0 flex items-center justify-center"
              aria-label="Play video"
            >
              <span
                className={`relative z-10 flex items-center justify-center rounded-full bg-black/55 text-white backdrop-blur ${
                  compact ? "h-9 w-9" : "h-12 w-12 md:h-14 md:w-14"
                }`}
              >
                <Play
                  className={`translate-x-0.5 fill-white ${
                    compact ? "h-4 w-4" : "h-5 w-5 md:h-6 md:w-6"
                  }`}
                />
              </span>
            </button>
          )}
        </>
      )}
    </div>
  );
}

export function VideoBubble({ post }: { post: Post }) {
  const { lang } = useI18n();
  const videos = post.attachments.filter(isVideoAttachment);
  const text = postDisplayText(post, lang);
  const shouldMerge = videos.length > MAX_VISIBLE;
  if (!videos.length) return null;

  if (shouldMerge) {
    const visible = videos.slice(0, MAX_VISIBLE);
    const extra = videos.length - MAX_VISIBLE;

    return (
      <div className="flex flex-col gap-1.5">
        <div className="grid h-[220px] grid-cols-2 grid-rows-2 gap-[2px] overflow-hidden rounded-xl bg-black min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]">
          {visible.map((att, i) => {
            const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
            return (
              <VideoAttachmentCard
                key={att.id}
                postId={post.id}
                attachment={att}
                compact
                overlayCount={isLastSlot ? extra : undefined}
              />
            );
          })}
        </div>
        {text ? (
          <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
            {autolink(text)}
          </div>
        ) : null}
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-1.5">
      {videos.map((att) => (
        <VideoAttachmentCard key={att.id} postId={post.id} attachment={att} />
      ))}
      {text ? (
        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
          {autolink(text)}
        </div>
      ) : null}
    </div>
  );
}