siftlode/frontend/src/components/PlexPlaylistView.tsx

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowLeft, ChevronDown, ChevronUp, Pencil, Play, Trash2, X } from "lucide-react";
import { api, type PlexCard } from "../lib/api";
import { useConfirm } from "./ConfirmProvider";

// A playlist's ordered items — reorder (up/down), remove, rename, delete, and "Play all" (which opens
// the player with the whole ordered list as its queue). Rendered as a PlexBrowse subview.
export default function PlexPlaylistView({
  playlistId,
  onBack,
  onPlay,
}: {
  playlistId: number;
  onBack: () => void;
  onPlay: (itemRk: string, queue: string[]) => void;
}) {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const confirm = useConfirm();
  const [renaming, setRenaming] = useState(false);
  const [name, setName] = useState("");
  const [busy, setBusy] = useState(false);

  const q = useQuery({ queryKey: ["plex-playlist", playlistId], queryFn: () => api.plexPlaylist(playlistId) });
  const items: PlexCard[] = q.data?.items ?? [];
  const order = items.map((i) => i.id);
  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ["plex-playlist", playlistId] });
    qc.invalidateQueries({ queryKey: ["plex-playlists"] });
  };

  async function move(idx: number, dir: -1 | 1) {
    const to = idx + dir;
    if (busy || to < 0 || to >= order.length) return;
    setBusy(true);
    const next = [...order];
    [next[idx], next[to]] = [next[to], next[idx]];
    try {
      await api.plexReorderPlaylist(playlistId, next);
      invalidate();
    } finally {
      setBusy(false);
    }
  }
  async function remove(itemRk: string) {
    if (busy) return;
    setBusy(true);
    try {
      await api.plexPlaylistRemoveItem(playlistId, itemRk);
      invalidate();
    } finally {
      setBusy(false);
    }
  }
  async function rename() {
    const title = name.trim();
    if (!title) return;
    await api.plexRenamePlaylist(playlistId, title);
    setRenaming(false);
    invalidate();
  }
  async function del() {
    if (!(await confirm({ message: t("plex.playlist.deleteConfirm", { title: q.data?.title }), danger: true })))
      return;
    await api.plexDeletePlaylist(playlistId);
    qc.invalidateQueries({ queryKey: ["plex-playlists"] });
    onBack();
  }

  return (
    <div className="w-[90%] max-w-[1100px] mx-auto p-4">
      <button
        onClick={onBack}
        className="glass-card glass-hover mb-4 inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs"
      >
        <ArrowLeft className="h-4 w-4" />
        {t("plex.backToLibrary")}
      </button>

      <div className="glass rounded-2xl p-4 sm:p-6">
        {/* Header: title (rename) + Play all + delete */}
        <div className="mb-4 flex flex-wrap items-center gap-3">
          {renaming ? (
            <input
              autoFocus
              value={name}
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && rename()}
              onBlur={rename}
              className="glass-card min-w-0 flex-1 rounded-lg px-3 py-1.5 text-lg font-bold outline-none focus:border-accent"
            />
          ) : (
            <h1 className="min-w-0 flex-1 truncate text-2xl font-bold">{q.data?.title ?? " "}</h1>
          )}
          <button
            onClick={() => {
              setName(q.data?.title ?? "");
              setRenaming(true);
            }}
            title={t("plex.playlist.rename")}
            className="glass-card glass-hover rounded-lg p-2 text-sm hover:text-accent"
          >
            <Pencil className="h-4 w-4" />
          </button>
          {items.length > 0 && (
            <button
              onClick={() => onPlay(order[0], order)}
              className="inline-flex items-center gap-2 rounded-xl bg-accent px-4 py-2 font-medium text-white hover:opacity-90"
            >
              <Play className="h-5 w-5 fill-current" />
              {t("plex.playlist.playAll")}
            </button>
          )}
          <button
            onClick={del}
            title={t("plex.playlist.delete")}
            className="glass-card glass-hover rounded-lg p-2 text-sm hover:text-red-400"
          >
            <Trash2 className="h-4 w-4" />
          </button>
        </div>

        {q.isLoading ? (
          <p className="py-6 text-center text-sm text-muted">{t("plex.loading")}</p>
        ) : items.length === 0 ? (
          <p className="py-6 text-center text-sm text-muted">{t("plex.playlist.empty")}</p>
        ) : (
          <ol className="space-y-1.5">
            {items.map((it, idx) => (
              <li key={it.id} className="glass-card flex items-center gap-3 rounded-lg p-2">
                <span className="w-5 shrink-0 text-center text-xs text-muted">{idx + 1}</span>
                <button
                  onClick={() => onPlay(it.id, order)}
                  className="group flex min-w-0 flex-1 items-center gap-3 text-left"
                >
                  <div className="relative h-14 w-10 shrink-0 overflow-hidden rounded border border-border bg-surface">
                    <img src={it.thumb} alt="" loading="lazy" className="h-full w-full object-cover" />
                    <div className="absolute inset-0 grid place-items-center bg-black/40 opacity-0 transition group-hover:opacity-100">
                      <Play className="h-5 w-5 text-white" fill="currentColor" />
                    </div>
                  </div>
                  <div className="min-w-0">
                    <div className="truncate text-sm font-medium">
                      {it.type === "episode" && it.show_title ? `${it.show_title} — ${it.title}` : it.title}
                    </div>
                    <div className="text-xs text-muted">{it.year}</div>
                  </div>
                </button>
                <div className="flex shrink-0 items-center gap-1">
                  <button
                    onClick={() => move(idx, -1)}
                    disabled={busy || idx === 0}
                    className="rounded p-1 text-muted hover:text-fg disabled:opacity-30"
                    title={t("plex.playlist.up")}
                  >
                    <ChevronUp className="h-4 w-4" />
                  </button>
                  <button
                    onClick={() => move(idx, 1)}
                    disabled={busy || idx === items.length - 1}
                    className="rounded p-1 text-muted hover:text-fg disabled:opacity-30"
                    title={t("plex.playlist.down")}
                  >
                    <ChevronDown className="h-4 w-4" />
                  </button>
                  <button
                    onClick={() => remove(it.id)}
                    disabled={busy}
                    className="rounded p-1 text-muted hover:text-red-400 disabled:opacity-30"
                    title={t("plex.playlist.remove")}
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>
              </li>
            ))}
          </ol>
        )}
      </div>
    </div>
  );
}