import { Play } from "lucide-react";
import { useRef, useState } from "react";
import type { Post } from "../../../types/post";
import { useVideoPlayer } from "../overlays/VideoPlayer";
import { autolink } from "../utils/autolink";
import { formatBytes } from "../utils/formatBytes";

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")}`;
}

export function VideoBubble({ post }: { post: Post }) {
  const { openVideo } = useVideoPlayer();
  const att = post.attachments[0];
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);
  if (!att) return null;
  const ratio =
    att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";

  return (
    <div className="flex flex-col gap-1.5">
      <div
        className="relative max-h-[220px] w-full overflow-hidden rounded-xl bg-black min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
        style={{ aspectRatio: ratio }}
        onClick={() => {
          if (playing) {
            const v = videoRef.current;
            openVideo(att, v?.currentTime ?? 0);
          }
        }}
      >
        {playing ? (
          <video
            ref={videoRef}
            src={att.url}
            poster={att.posterUrl}
            controls
            playsInline
            autoPlay
            className="absolute inset-0 h-full w-full"
          />
        ) : (
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              setPlaying(true);
            }}
            className="absolute inset-0 flex items-center justify-center"
            aria-label="Play video"
          >
            {att.posterUrl ? (
              <img
                src={att.posterUrl}
                alt=""
                className="absolute inset-0 h-full w-full object-cover"
              />
            ) : null}
            <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1 text-xs text-white">
              <span>{formatDuration(att.durationSec)}</span>
              <span className="opacity-70">·</span>
              <span>{formatBytes(att.sizeBytes)}</span>
            </div>
            <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur md:h-14 md:w-14">
              <Play className="h-5 w-5 translate-x-0.5 fill-white md:h-6 md:w-6" />
            </div>
          </button>
        )}
      </div>
      {post.text ? (
        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
          {autolink(post.text)}
        </div>
      ) : null}
    </div>
  );
}