veza/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx

import React, { useState } from 'react';
import { Dialog } from '../../ui/dialog';
import { Input } from '../../ui/input';
import { Lock, Globe } from 'lucide-react';
import { useToast } from '../../../components/feedback/ToastProvider';
import { useTranslation } from '@/hooks/useTranslation';

interface SaveQueueAsPlaylistModalProps {
  open: boolean;
  onClose: () => void;
  onSave: (name: string, isPublic: boolean) => void | Promise<void>;
}

export const SaveQueueAsPlaylistModal: React.FC<
  SaveQueueAsPlaylistModalProps
> = ({ open, onClose, onSave }) => {
  const { addToast } = useToast();
  const { t } = useTranslation();
  const [name, setName] = useState('');
  const [isPublic, setIsPublic] = useState(false);
  const [saving, setSaving] = useState(false);

  const handleSubmit = async () => {
    if (!name) {
      addToast(t('queue.saveAsPlaylist.nameRequired'), 'error');
      return;
    }
    setSaving(true);
    try {
      await onSave(name, isPublic);
      onClose();
    } catch (err) {
      addToast(
        err instanceof Error
          ? err.message
          : t('queue.saveAsPlaylist.saveFailed'),
        'error',
      );
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={t('queue.saveAsPlaylist.title')}
      onConfirm={handleSubmit}
      confirmLabel={saving ? t('common.loading') : t('queue.saveAsPlaylist.save')}
      onCancel={onClose}
      showCancel
      cancelLabel={t('queue.saveAsPlaylist.cancel')}
    >
      <div className="space-y-4">
        <Input
          id="queue-playlist-name"
          label={t('queue.saveAsPlaylist.nameLabel')}
          value={name}
          onChange={(e) => setName(e.target.value)}
          autoFocus
          placeholder={t('queue.saveAsPlaylist.namePlaceholder')}
        />

        <button
          type="button"
          role="switch"
          aria-checked={isPublic}
          aria-label={t('queue.saveAsPlaylist.toggleVisibility')}
          className="flex w-full items-center justify-between p-4 bg-card rounded border border-border cursor-pointer hover:border-border/80"
          onClick={() => setIsPublic(!isPublic)}
        >
          <div className="flex items-center gap-4">
            {isPublic ? (
              <Globe className="w-5 h-5 text-muted-foreground" />
            ) : (
              <Lock className="w-5 h-5 text-warning" />
            )}
            <div className="text-left">
              <div className="text-sm font-bold text-foreground">
                {isPublic
                  ? t('queue.saveAsPlaylist.publicPlaylist')
                  : t('queue.saveAsPlaylist.privatePlaylist')}
              </div>
              <div className="text-xs text-muted-foreground">
                {isPublic
                  ? t('queue.saveAsPlaylist.publicDescription')
                  : t('queue.saveAsPlaylist.privateDescription')}
              </div>
            </div>
          </div>
          <div
            aria-hidden="true"
            className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-primary' : 'bg-muted'}`}
          >
            <div
              className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-6' : 'left-1'}`}
            ></div>
          </div>
        </button>
      </div>
    </Dialog>
  );
};