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

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { Modal } from '@/components/ui/modal';
import { Lock, Globe, Users, Image as ImageIcon } from 'lucide-react';
import { useToast } from '../../../components/feedback/ToastProvider';

interface CreatePlaylistModalProps {
  onClose: () => void;
  onCreate: (data: any) => void;
}

export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
  onClose,
  onCreate,
}) => {
  const { addToast } = useToast();
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [isPublic, setIsPublic] = useState(true);
  const [isCollaborative, setIsCollaborative] = useState(false);

  const handleSubmit = () => {
    if (!name) {
      addToast('Please enter a playlist name', 'error');
      return;
    }
    onCreate({ name, description, isPublic, isCollaborative });
    onClose();
  };

  return (
    <Modal
      open={true}
      onClose={onClose}
      title="Create Playlist"
      className="max-w-lg"
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSubmit}>
            Create
          </Button>
        </>
      }
    >
      <div className="flex flex-col md:flex-row gap-6">
        <div className="w-40 h-40 bg-card border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border/50 cursor-pointer transition-colors flex-shrink-0">
          <ImageIcon className="w-8 h-8 mb-2" />
          <span className="text-xs font-bold uppercase">Cover</span>
        </div>

        <div className="flex-1 space-y-4">
          <Input
            placeholder="Playlist Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            autoFocus
          />

          <textarea
            className="w-full bg-card border border-border rounded-lg p-4 text-foreground focus:border-border outline-none text-sm resize-none h-24"
            placeholder="Description (Optional)"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />

          <div className="space-y-2">
            <div
              className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer"
              onClick={() => setIsPublic(!isPublic)}
            >
              <div className="flex items-center gap-4">
                {isPublic ? (
                  <Globe className="w-4 h-4 text-muted-foreground" />
                ) : (
                  <Lock className="w-4 h-4 text-warning" />
                )}
                <div className="text-sm">
                  <div className="text-foreground font-bold">
                    {isPublic ? 'Public' : 'Private'}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {isPublic
                      ? 'Visible to everyone'
                      : 'Only you can see this'}
                  </div>
                </div>
              </div>
              <div
                className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-primary' : 'bg-muted'}`}
              >
                <div
                  className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isPublic ? 'left-4.5' : 'left-0.5'}`}
                ></div>
              </div>
            </div>

            <div
              className="flex items-center justify-between p-2 rounded hover:bg-white/5 cursor-pointer"
              onClick={() => setIsCollaborative(!isCollaborative)}
            >
              <div className="flex items-center gap-4">
                <Users
                  className={`w-4 h-4 ${isCollaborative ? 'text-success' : 'text-muted-foreground'}`}
                />
                <div className="text-sm">
                  <div className="text-foreground font-bold">Collaborative</div>
                  <div className="text-xs text-muted-foreground">
                    Friends can add tracks
                  </div>
                </div>
              </div>
              <div
                className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-success' : 'bg-muted'}`}
              >
                <div
                  className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isCollaborative ? 'left-4.5' : 'left-0.5'}`}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};