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

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { X, Lock, Globe } from 'lucide-react';
import { useToast } from '../../../components/feedback/ToastProvider';

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

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

  const handleSubmit = () => {
    if (!name) {
      addToast('Please name your playlist', 'error');
      return;
    }
    onSave(name, isPublic);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn">
        <div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white">Save Queue as Playlist</h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-4">
          <Input
            label="Playlist Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            autoFocus
            placeholder="My Queue Session"
          />

          <div
            className="flex items-center justify-between p-4 bg-kodo-ink rounded border border-border cursor-pointer hover:border-border"
            onClick={() => setIsPublic(!isPublic)}
          >
            <div className="flex items-center gap-4">
              {isPublic ? (
                <Globe className="w-5 h-5 text-kodo-steel" />
              ) : (
                <Lock className="w-5 h-5 text-kodo-gold" />
              )}
              <div>
                <div className="text-sm font-bold text-white">
                  {isPublic ? 'Public Playlist' : 'Private Playlist'}
                </div>
                <div className="text-xs text-muted-foreground">
                  {isPublic ? 'Visible on your profile' : 'Only visible to you'}
                </div>
              </div>
            </div>
            <div
              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>
          </div>
        </div>

        <div className="p-4 border-t border-border bg-kodo-ink flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSubmit}>
            Save Playlist
          </Button>
        </div>
      </div>
    </div>
  );
};