"use client";

import { useEffect, useRef, useState } from "react";

type Kind = "audio" | "video";

type LoadState =
  | { phase: "loading" }
  | { phase: "ready"; duration: number | null }
  | { phase: "error"; message: string };

type Props = {
  src: string;
  kind: Kind;
  filename: string;
};

const MEDIA_ERROR_REASONS: Record<number, string> = {
  1: "Playback aborted.",
  2: "Network error while loading the file.",
  3: "Decoder failed — file may be malformed or use an unsupported codec.",
  4: "Source not supported — browser cannot decode this format.",
};

export function MediaPlayer({ src, kind, filename }: Props) {
  const ref = useRef<HTMLMediaElement | null>(null);
  const [state, setState] = useState<LoadState>({ phase: "loading" });

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    setState({ phase: "loading" });
    const onLoadedMeta = () => {
      const d = el.duration;
      setState({
        phase: "ready",
        duration: Number.isFinite(d) ? d : null,
      });
    };
    const onError = () => {
      const code = el.error?.code;
      const detail =
        code !== undefined
          ? (MEDIA_ERROR_REASONS[code] ?? "Unknown decode error.")
          : "Unknown decode error.";
      setState({ phase: "error", message: detail });
    };
    el.addEventListener("loadedmetadata", onLoadedMeta);
    el.addEventListener("error", onError);
    return () => {
      el.removeEventListener("loadedmetadata", onLoadedMeta);
      el.removeEventListener("error", onError);
    };
  }, [src]);

  const refCallback = (node: HTMLMediaElement | null) => {
    ref.current = node;
  };

  return (
    <div className="flex flex-col gap-2">
      {kind === "audio" ? (
        <audio
          ref={refCallback}
          controls
          preload="metadata"
          src={src}
          aria-label={`media player for ${filename}`}
          className="w-full max-w-md"
        />
      ) : (
        <video
          ref={refCallback}
          controls
          preload="metadata"
          src={src}
          aria-label={`media player for ${filename}`}
          className="w-full max-w-md max-h-64 bg-muted rounded"
        />
      )}
      <StatusLine state={state} filename={filename} />
    </div>
  );
}

function StatusLine({
  state,
  filename,
}: {
  state: LoadState;
  filename: string;
}) {
  if (state.phase === "loading") {
    return (
      <p
        className="text-xs text-muted-foreground"
        aria-label={`media status for ${filename}`}
      >
        Loading metadata…
      </p>
    );
  }
  if (state.phase === "error") {
    return (
      <p
        role="alert"
        aria-label={`media error for ${filename}`}
        className="text-xs text-destructive"
      >
        Malformed: {state.message}
      </p>
    );
  }
  return (
    <p
      className="text-xs text-success"
      aria-label={`media status for ${filename}`}
    >
      Decodes OK
      {state.duration !== null && ` · ${formatDuration(state.duration)}`}
    </p>
  );
}

function formatDuration(seconds: number): string {
  const s = Math.round(seconds);
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  if (h > 0)
    return `${h}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
  return `${m}:${String(sec).padStart(2, "0")}`;
}