import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import type { Playlist } from '@/lib/api/services/playlists'
import { Edit, Music, Save, X } from 'lucide-react'

interface PlaylistDetailsCardProps {
  playlist: Playlist
  isEditMode: boolean
  formData: {
    name: string
    description: string
    genre: string
  }
  hasChanges: boolean
  saving: boolean
  onInputChange: (field: string, value: string) => void
  onSave: () => void
  onCancelEdit: () => void
  onStartEdit: () => void
}

export function PlaylistDetailsCard({
  playlist,
  isEditMode,
  formData,
  hasChanges,
  saving,
  onInputChange,
  onSave,
  onCancelEdit,
  onStartEdit,
}: PlaylistDetailsCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Music className="h-5 w-5" />
          Playlist Details
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {isEditMode ? (
          <>
            <div className="space-y-2">
              <Label htmlFor="name">Name *</Label>
              <Input
                id="name"
                value={formData.name}
                onChange={e => onInputChange('name', e.target.value)}
                placeholder="Playlist name"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={e => onInputChange('description', e.target.value)}
                placeholder="Playlist description"
                className="min-h-[100px]"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="genre">Genre</Label>
              <Input
                id="genre"
                value={formData.genre}
                onChange={e => onInputChange('genre', e.target.value)}
                placeholder="Electronic, Rock, Comedy, etc."
              />
            </div>
          </>
        ) : (
          <>
            <div className="space-y-3">
              <div>
                <Label className="text-sm font-medium text-muted-foreground">
                  Name
                </Label>
                <p className="text-lg font-semibold">{playlist.name}</p>
              </div>

              {playlist.description && (
                <div>
                  <Label className="text-sm font-medium text-muted-foreground">
                    Description
                  </Label>
                  <p className="text-sm">{playlist.description}</p>
                </div>
              )}

              {playlist.genre && (
                <div>
                  <Label className="text-sm font-medium text-muted-foreground">
                    Genre
                  </Label>
                  <Badge variant="secondary" className="mt-1">
                    {playlist.genre}
                  </Badge>
                </div>
              )}

              {!playlist.description && !playlist.genre && (
                <p className="text-sm text-muted-foreground italic">
                  No additional details provided
                </p>
              )}
            </div>
          </>
        )}

        {/* Edit/Save/Cancel buttons */}
        <div className="pt-4 border-t">
          {playlist.is_main ? (
            <div className="text-center">
              <p className="text-sm text-muted-foreground">
                Main playlist details cannot be edited
              </p>
            </div>
          ) : isEditMode ? (
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={onCancelEdit}>
                <X className="h-4 w-4 mr-2" />
                Cancel
              </Button>
              <Button
                onClick={onSave}
                disabled={!hasChanges || saving}
              >
                <Save className="h-4 w-4 mr-2" />
                {saving ? 'Saving...' : 'Save Changes'}
              </Button>
            </div>
          ) : (
            <Button
              onClick={onStartEdit}
              className="w-full"
            >
              <Edit className="h-4 w-4 mr-2" />
              Edit
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  )
}