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 { X, 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 (
    <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-lg bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-border bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white">Create Playlist</h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
          </button>
        </div>

        <div className="p-6 flex flex-col md:flex-row gap-6">
          <div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground hover:text-white 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-kodo-graphite border border-border rounded-lg p-4 text-white 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-kodo-steel" />
                  ) : (
                    <Lock className="w-4 h-4 text-warning" />
                  )}
                  <div className="text-sm">
                    <div className="text-white 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-white 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>

        <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}>
            Create
          </Button>
        </div>
      </div>
    </div>
  );
};