"use client";

import { useState, useTransition } from "react";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { MediaPlayer } from "../MediaPlayer";
import { TextFilePreview } from "../TextFilePreview";
import {
  deleteVideoFileAction,
} from "../../videoActions";
import { mediaKind, mediaUrl, type VideoFile } from "./videoFiles";

export function FilesList({
  slug,
  videoId,
  files,
}: {
  slug: string;
  videoId: string;
  files: VideoFile[];
}) {
  if (files.length === 0) {
    return <p className="text-sm text-muted-foreground">Directory is empty.</p>;
  }
  return (
    <ul
      aria-label={`files for ${videoId}`}
      className="flex flex-col gap-3"
    >
      {files.map((f) => {
        const kind = mediaKind(f.name);
        return (
          <li
            key={f.name}
            className="border border-border rounded-md p-3 flex flex-col gap-2"
          >
            <div className="flex items-baseline justify-between gap-3 flex-wrap">
              <span
                className="font-mono text-sm"
                aria-label={`file name ${f.name}`}
              >
                {f.name}
              </span>
              <span className="text-xs text-muted-foreground">
                {f.size === null ? "— (media drive not reachable)" : formatBytes(f.size)}{" "}
                · {new Date(f.mtime).toLocaleString()}
              </span>
            </div>
            {kind === "audio" || kind === "video" ? (
              <MediaPlayer
                src={mediaUrl(slug, videoId, f.name)}
                kind={kind}
                filename={f.name}
              />
            ) : kind === "text" ? (
              <TextFilePreview
                src={mediaUrl(slug, videoId, f.name)}
                filename={f.name}
              />
            ) : null}
            <DeleteFileButton slug={slug} videoId={videoId} filename={f.name} />
          </li>
        );
      })}
    </ul>
  );
}

function DeleteFileButton({
  slug,
  videoId,
  filename,
}: {
  slug: string;
  videoId: string;
  filename: string;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        disabled={pending}
        aria-label={`delete file ${filename}`}
        onClick={() => {
          if (!confirm(`Delete ${filename}?`)) return;
          setError(null);
          startTransition(async () => {
            const res = await deleteVideoFileAction(slug, videoId, filename);
            if (!res.ok) setError(res.error);
          });
        }}
        className="self-start px-2 py-1 rounded border border-destructive/30 text-destructive text-xs hover:bg-destructive-soft disabled:opacity-50"
      >
        {pending ? "Deleting…" : "Delete file"}
      </button>
      {error && (
        <span
          className="text-xs text-destructive"
          aria-label={`delete error ${filename}`}
        >
          {error}
        </span>
      )}
    </div>
  );
}