import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import type { UseFileBrowserAppType } from '../useFileBrowserApp';

type VideoDownloadDialogProps = {
  fileBrowserManager: UseFileBrowserAppType;
};

export const VideoDownloadDialog = ({ fileBrowserManager }: VideoDownloadDialogProps) => {
  const { showVideoDownload, setShowVideoDownload, videoUrl, setVideoUrl, audioOnly, setAudioOnly, handleVideoDownload } =
    fileBrowserManager;

  const handleClose = () => {
    setShowVideoDownload(false);
    setVideoUrl('');
    setAudioOnly(false);
  };

  return (
    <Dialog
      open={showVideoDownload}
      onOpenChange={(open) => {
        if (!open) handleClose();
      }}
    >
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Download video</DialogTitle>
          <DialogDescription>Download a video from a URL using yt-dlp</DialogDescription>
        </DialogHeader>
        <form
          onSubmit={(ev) => {
            ev.preventDefault();
            handleVideoDownload();
          }}
          className="flex flex-col gap-4"
        >
          <input
            autoFocus
            value={videoUrl}
            onChange={(ev) => setVideoUrl(ev.target.value)}
            placeholder="https://www.youtube.com/watch?v=..."
            className="h-10 w-full text-sm rounded-md border border-duck-dark/20 bg-background/60 text-duck-dark placeholder:text-duck-dark/40 outline-none focus:border-duck-teal/50 px-3"
          />
          <label className="flex items-center gap-2 cursor-pointer text-sm text-duck-dark/70">
            <Checkbox checked={audioOnly} onCheckedChange={(v) => setAudioOnly(v === true)} />
            Extract audio only (mp3)
          </label>
          <div className="flex justify-end gap-2">
            <button
              type="button"
              onClick={handleClose}
              className="px-4 py-2 text-sm rounded-md text-duck-dark/70 hover:bg-duck-dark/5 cursor-pointer transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={!videoUrl.trim()}
              className="px-4 py-2 text-sm rounded-md bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
            >
              Download
            </button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
};
