import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { X } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';

interface Playlist {
  id: string;
  name: string;
  description?: string;
  is_public: boolean;
}

interface PlaylistEditorProps {
  playlist?: Playlist;
  onSave: (playlist: Playlist) => void;
  onCancel: () => void;
}

export function PlaylistEditor({ playlist, onSave, onCancel }: PlaylistEditorProps) {
  const [name, setName] = useState(playlist?.name || '');
  const [description, setDescription] = useState(playlist?.description || '');
  const [isPublic, setIsPublic] = useState(playlist?.is_public ?? true);
  const [isSaving, setIsSaving] = useState(false);
  const { toast } = useToast();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!name.trim()) {
      toast({
        title: 'Name required',
        description: 'Please enter a playlist name',
        variant: 'destructive',
      });
      return;
    }

    setIsSaving(true);

    try {
      // TODO: Call API to save playlist
      const newPlaylist: Playlist = {
        id: playlist?.id || Date.now().toString(),
        name,
        description,
        is_public: isPublic,
      };

      onSave(newPlaylist);
      toast({
        title: 'Playlist saved',
        description: `${isPublic ? 'Public' : 'Private'} playlist created`,
      });
    } catch (error: any) {
      toast({
        title: 'Failed to save',
        description: error.message,
        variant: 'destructive',
      });
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <Card className="max-w-2xl mx-auto">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>{playlist ? 'Edit Playlist' : 'Create Playlist'}</CardTitle>
          <Button variant="ghost" size="icon" onClick={onCancel}>
            <X className="h-4 w-4" />
          </Button>
        </div>
        <CardDescription>Create a new playlist or edit an existing one</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Playlist Name *</Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="My Awesome Playlist"
              required
              disabled={isSaving}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Describe your playlist..."
              rows={3}
              disabled={isSaving}
            />
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="public"
              checked={isPublic}
              onCheckedChange={(checked) => setIsPublic(checked as boolean)}
              disabled={isSaving}
            />
            <Label htmlFor="public" className="cursor-pointer">
              Make this playlist public
            </Label>
          </div>

          <div className="flex gap-2">
            <Button type="button" variant="outline" onClick={onCancel} disabled={isSaving} className="flex-1">
              Cancel
            </Button>
            <Button type="submit" disabled={isSaving || !name.trim()} className="flex-1">
              {isSaving ? 'Saving...' : 'Save Playlist'}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}

