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

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

interface EditPlaylistModalProps {
  playlist: Playlist;
  onClose: () => void;
  onSave: (data: Partial<Playlist>) => void;
  onDelete: () => void;
}

export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
  playlist,
  onClose,
  onSave,
  onDelete,
}) => {
  const { addToast } = useToast();
  const [name, setName] = useState(playlist.title);
  const [description, setDescription] = useState(playlist.description || '');
  const [isPublic, setIsPublic] = useState(playlist.is_public ?? true);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

  const handleSubmit = () => {
    if (!name) {
      addToast('Playlist name cannot be empty', 'error');
      return;
    }
    onSave({ title: name, description, is_public: isPublic });
    onClose();
  };

  const handleDelete = () => {
    onDelete();
    onClose();
  };

  if (showDeleteConfirm) {
    return (
      <div className="fixed inset-0 z-[500] flex items-center justify-center p-4">
        <div
          className="absolute inset-0 bg-background/90 backdrop-blur-sm"
          onClick={() => setShowDeleteConfirm(false)}
        ></div>
        <div className="relative w-full max-w-sm bg-muted border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
          <h3 className="text-xl font-bold text-white mb-2">
            Delete "{playlist.title}"?
          </h3>
          <p className="text-sm text-muted-foreground mb-6">
            This action cannot be undone.
          </p>
          <div className="flex gap-4 justify-center">
            <Button variant="ghost" onClick={() => setShowDeleteConfirm(false)}>
              Cancel
            </Button>
            <Button
              variant="primary"
              className="bg-destructive hover:bg-destructive border-destructive"
              onClick={handleDelete}
            >
              Delete
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 z-[400] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-border bg-card flex justify-between items-center">
          <h3 className="font-bold text-white">Edit Details</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-card border border-border rounded-lg flex flex-col items-center justify-center relative group overflow-hidden flex-shrink-0">
            <img
              src={playlist.cover_url}
              className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"
            />
            <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
              <ImageIcon className="w-8 h-8 text-white" />
            </div>
          </div>

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

            <textarea
              className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none text-sm resize-none h-24"
              placeholder="Description"
              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-white font-bold">
                      {isPublic ? 'Public' : 'Private'}
                    </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>

              {/* Collaborative toggle removed as it's not in the type */}
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-border bg-card flex justify-between items-center">
          <Button
            variant="ghost"
            className="text-destructive hover:bg-destructive/10"
            onClick={() => setShowDeleteConfirm(true)}
          >
            Delete Playlist
          </Button>
          <div className="flex gap-4">
            <Button variant="ghost" onClick={onClose}>
              Cancel
            </Button>
            <Button variant="primary" onClick={handleSubmit}>
              Save
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};