import type { Torrent } from '../shared';
import type { FormEvent } from 'react';
import { useEffect, useState } from '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-rename-path renames a path *inside* the torrent, addressed by its full path relative to the
// torrent root. Renaming the root itself means passing the torrent's own name as the path — which is why
// this dialog takes a `path` as well as the new name, and why it is single-target only.

type RenameDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  torrent: Torrent | null;
  /** The path being renamed; the torrent's own name when renaming the root. */
  path: string;
};

export const RenameDialog = ({ open, onOpenChange, torrent, path }: RenameDialogProps) => {
  const { rename } = useTorrentMutations();
  const [name, setName] = useState('');

  // Only the last segment is editable — the rest of the path is where the file lives, not what it is called.
  const segments = path.split('/');
  const parent = segments.slice(0, -1).join('/');
  const current = segments[segments.length - 1] ?? '';

  useEffect(() => {
    if (open) setName(current);
  }, [open, current]);

  const submit = async (ev?: FormEvent) => {
    ev?.preventDefault();
    if (!torrent) return;
    await rename.mutateAsync({ id: torrent.id, path, name: name.trim() });
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Rename</DialogTitle>
          <DialogDescription className="break-all">{parent ? `${parent}/` : path}</DialogDescription>
        </DialogHeader>

        <form onSubmit={submit} className="space-y-1.5">
          <Label htmlFor="tr-rename">New name</Label>
          <Input id="tr-rename" value={name} onChange={(ev) => setName(ev.target.value)} autoFocus />
          <p className="text-xs text-muted-foreground">
            This renames the file or folder on disk, not just the display name.
          </p>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={!name.trim() || name.trim() === current || rename.isPending}>
              Rename
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};