281 lines
11 KiB
TypeScript
281 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export interface InviteArtistModalProps {
|
|
isOpen: boolean
|
|
labelId: string
|
|
onClose: () => void
|
|
onInviteSent?: () => void
|
|
}
|
|
|
|
interface Artist {
|
|
id: string
|
|
name: string
|
|
user?: {
|
|
avatarUrl?: string
|
|
}
|
|
verified?: boolean
|
|
}
|
|
|
|
export function InviteArtistModal({
|
|
isOpen,
|
|
labelId,
|
|
onClose,
|
|
onInviteSent
|
|
}: InviteArtistModalProps) {
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [searchResults, setSearchResults] = useState<Artist[]>([])
|
|
const [selectedArtist, setSelectedArtist] = useState<Artist | null>(null)
|
|
const [message, setMessage] = useState('')
|
|
const [isSearching, setIsSearching] = useState(false)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (searchQuery.trim().length > 0) {
|
|
const timer = setTimeout(() => {
|
|
searchArtists(searchQuery)
|
|
}, 300)
|
|
return () => clearTimeout(timer)
|
|
} else {
|
|
setSearchResults([])
|
|
}
|
|
}, [searchQuery])
|
|
|
|
const searchArtists = async (query: string) => {
|
|
setIsSearching(true)
|
|
setError(null)
|
|
try {
|
|
const res = await fetch(`/api/artists/search?q=${encodeURIComponent(query)}`)
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setSearchResults(data.artists || [])
|
|
} else {
|
|
setError('Failed to search artists')
|
|
}
|
|
} catch (err) {
|
|
setError('Network error')
|
|
} finally {
|
|
setIsSearching(false)
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!selectedArtist) return
|
|
|
|
setIsSubmitting(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const res = await fetch(`/api/labels/${labelId}/invitations`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
artistId: selectedArtist.id,
|
|
message: message.trim() || undefined
|
|
})
|
|
})
|
|
|
|
if (res.ok) {
|
|
handleClose()
|
|
onInviteSent?.()
|
|
} else {
|
|
const data = await res.json()
|
|
setError(data.error || 'Failed to send invitation')
|
|
}
|
|
} catch (err) {
|
|
setError('Network error')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleClose = () => {
|
|
if (!isSubmitting) {
|
|
setSearchQuery('')
|
|
setSearchResults([])
|
|
setSelectedArtist(null)
|
|
setMessage('')
|
|
setError(null)
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
|
onClick={handleClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="relative bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 w-full max-w-md overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-6 border-b border-zinc-800">
|
|
<h2 className="text-2xl font-bold text-white">Invite Artist</h2>
|
|
<button
|
|
onClick={handleClose}
|
|
disabled={isSubmitting}
|
|
className="p-2 text-zinc-400 hover:text-white transition disabled:opacity-50"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6">
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="p-4 bg-red-900/20 border border-red-800 rounded-lg">
|
|
<p className="text-sm text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Search */}
|
|
<div>
|
|
<label htmlFor="search" className="block text-sm font-medium text-zinc-300 mb-2">
|
|
Search Artist
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="search"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search by artist name..."
|
|
className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
autoFocus
|
|
/>
|
|
|
|
{/* Search Results */}
|
|
{searchQuery.trim().length > 0 && (
|
|
<div className="mt-2 max-h-48 overflow-y-auto bg-zinc-800 border border-zinc-700 rounded-lg">
|
|
{isSearching ? (
|
|
<div className="p-4 text-center text-zinc-400">
|
|
Searching...
|
|
</div>
|
|
) : searchResults.length > 0 ? (
|
|
<div className="divide-y divide-zinc-700">
|
|
{searchResults.map((artist) => (
|
|
<button
|
|
key={artist.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedArtist(artist)
|
|
setSearchQuery('')
|
|
setSearchResults([])
|
|
}}
|
|
className="w-full flex items-center gap-3 p-3 hover:bg-zinc-700 transition text-left"
|
|
>
|
|
<div className="w-10 h-10 rounded-full overflow-hidden bg-zinc-600 flex-shrink-0">
|
|
{artist.user?.avatarUrl ? (
|
|
<img src={artist.user.avatarUrl} alt={artist.name} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-zinc-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-white truncate">{artist.name}</p>
|
|
</div>
|
|
{artist.verified && (
|
|
<svg className="w-5 h-5 text-blue-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="p-4 text-center text-zinc-400">
|
|
No artists found
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Selected Artist */}
|
|
{selectedArtist && (
|
|
<div className="p-4 bg-zinc-800 rounded-lg border border-zinc-700">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full overflow-hidden bg-zinc-600 flex-shrink-0">
|
|
{selectedArtist.user?.avatarUrl ? (
|
|
<img src={selectedArtist.user.avatarUrl} alt={selectedArtist.name} className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-zinc-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-medium text-white">{selectedArtist.name}</p>
|
|
<p className="text-sm text-zinc-400">Selected</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedArtist(null)}
|
|
className="p-1 text-zinc-400 hover:text-white transition"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Message */}
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium text-zinc-300 mb-2">
|
|
Message (Optional)
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
placeholder="Add a personal message..."
|
|
rows={3}
|
|
maxLength={500}
|
|
className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none"
|
|
/>
|
|
<p className="mt-1 text-xs text-zinc-500 text-right">
|
|
{message.length}/500
|
|
</p>
|
|
</div>
|
|
|
|
{/* Buttons */}
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
disabled={isSubmitting}
|
|
className="flex-1 px-6 py-3 bg-zinc-800 hover:bg-zinc-700 disabled:bg-zinc-800 disabled:text-zinc-500 text-white font-medium rounded-lg transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting || !selectedArtist}
|
|
className="flex-1 px-6 py-3 bg-purple-500 hover:bg-purple-600 disabled:bg-zinc-700 disabled:text-zinc-500 text-white font-medium rounded-lg transition"
|
|
>
|
|
{isSubmitting ? 'Sending...' : 'Send Invitation'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|