transmission/web/dialogs/LabelsDialog.tsx

import type { Torrent } from '../shared';
import { useEffect, useState } from 'react';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useTorrentMutations } from '../useTransmissionData';

// torrent-set replaces the whole labels array — there is no add/remove verb — so editing labels across a
// multi-selection means deciding what "the labels" are for a set that may not agree. The dialog seeds from
// the intersection and warns when the selection is not uniform, rather than silently flattening it.

type LabelsDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  targets: Torrent[];
  /** Labels already in use anywhere, for one-click reuse. */
  known: string[];
};

export const LabelsDialog = ({ open, onOpenChange, targets, known }: LabelsDialogProps) => {
  const { set } = useTorrentMutations();
  const [labels, setLabels] = useState<string[]>([]);
  const [draft, setDraft] = useState('');

  const uniform =
    targets.length <= 1 ||
    targets.every((t) => [...t.labels].sort().join('') === [...targets[0]!.labels].sort().join(''));

  useEffect(() => {
    if (!open) return;
    if (targets.length === 0) return setLabels([]);
    // The intersection: labels every selected torrent already has. Applying it unchanged is then a no-op
    // for a uniform selection and a deliberate flattening for a mixed one.
    const shared = targets[0]!.labels.filter((l) => targets.every((t) => t.labels.includes(l)));
    setLabels(shared);
    setDraft('');
  }, [open, targets]);

  const add = (value: string) => {
    const clean = value.trim();
    if (!clean || labels.includes(clean)) return;
    setLabels((prev) => [...prev, clean]);
    setDraft('');
  };

  const submit = async () => {
    await set.mutateAsync({ ids: targets.map((t) => t.id), labels });
    onOpenChange(false);
  };

  const unused = known.filter((k) => !labels.includes(k));

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Labels</DialogTitle>
          <DialogDescription>
            {targets.length === 1 ? targets[0]!.name : `${targets.length} torrents`}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3">
          {!uniform && (
            <p className="rounded-lg bg-warning/15 px-3 py-2 text-xs text-warning">
              These torrents have different labels. Saving replaces all of them with the set below.
            </p>
          )}

          <div className="flex flex-wrap gap-1.5">
            {labels.length === 0 && <span className="text-xs text-muted-foreground">No labels.</span>}
            {labels.map((l) => (
              <span key={l} className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-xs text-primary">
                {l}
                <button
                  type="button"
                  onClick={() => setLabels((prev) => prev.filter((x) => x !== l))}
                  aria-label={`Remove ${l}`}
                >
                  <X className="h-3 w-3" />
                </button>
              </span>
            ))}
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="tr-label-new">Add a label</Label>
            <Input
              id="tr-label-new"
              value={draft}
              onChange={(ev) => setDraft(ev.target.value)}
              onKeyDown={(ev) => {
                if (ev.key === 'Enter') {
                  ev.preventDefault();
                  add(draft);
                }
              }}
              placeholder="press enter to add"
            />
          </div>

          {unused.length > 0 && (
            <div className="flex flex-wrap gap-1.5">
              {unused.map((k) => (
                <button
                  key={k}
                  type="button"
                  onClick={() => add(k)}
                  className="rounded bg-muted px-2 py-1 text-xs hover:bg-muted/70"
                >
                  + {k}
                </button>
              ))}
            </div>
          )}
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={submit} disabled={set.isPending}>
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};