From d7acbebc9ce5ebe2032fa01a3fa092d8f117883c Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Wed, 24 Dec 2025 16:20:29 -0800
Subject: [PATCH] feat: Sequences edit dialog with song reordering and
 management

---
 frontend/app/admin/sequences/page.tsx | 153 +++++++++++++++++++++++---
 1 file changed, 136 insertions(+), 17 deletions(-)

diff --git a/frontend/app/admin/sequences/page.tsx b/frontend/app/admin/sequences/page.tsx
index de83915..9a08692 100644
--- a/frontend/app/admin/sequences/page.tsx
+++ b/frontend/app/admin/sequences/page.tsx
@@ -40,6 +40,127 @@ interface Song {
     slug: string
 }
 
+// Edit Sequence Form Component
+function EditSequenceForm({
+    sequence,
+    allSongs,
+    token,
+    onSave,
+    onCancel
+}: {
+    sequence: Sequence
+    allSongs: Song[]
+    token: string
+    onSave: () => void
+    onCancel: () => void
+}) {
+    const [name, setName] = useState(sequence.name)
+    const [description, setDescription] = useState(sequence.description || "")
+    const [notes, setNotes] = useState(sequence.notes || "")
+    const [songIds, setSongIds] = useState<number[]>(sequence.songs.map(s => s.song_id))
+    const [songSearch, setSongSearch] = useState("")
+    const [saving, setSaving] = useState(false)
+
+    const filteredSongs = allSongs.filter(s =>
+        s.title.toLowerCase().includes(songSearch.toLowerCase()) &&
+        !songIds.includes(s.id)
+    ).slice(0, 15)
+
+    const addSong = (id: number) => setSongIds([...songIds, id])
+    const removeSong = (id: number) => setSongIds(songIds.filter(sid => sid !== id))
+    const moveSong = (index: number, direction: -1 | 1) => {
+        const newIds = [...songIds]
+        const newIndex = index + direction
+        if (newIndex < 0 || newIndex >= newIds.length) return
+        [newIds[index], newIds[newIndex]] = [newIds[newIndex], newIds[index]]
+        setSongIds(newIds)
+    }
+
+    const handleSave = async () => {
+        setSaving(true)
+        try {
+            const res = await fetch(`${getApiUrl()}/sequences/${sequence.id}`, {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`
+                },
+                body: JSON.stringify({ name, description, notes, song_ids: songIds })
+            })
+            if (res.ok) onSave()
+        } catch (e) {
+            console.error("Failed to save", e)
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    return (
+        <div className="space-y-4 py-4">
+            <div className="space-y-2">
+                <Label>Name *</Label>
+                <Input value={name} onChange={e => setName(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+                <Label>Description</Label>
+                <Textarea value={description} onChange={e => setDescription(e.target.value)} rows={2} />
+            </div>
+            <div className="space-y-2">
+                <Label>Notes</Label>
+                <Textarea value={notes} onChange={e => setNotes(e.target.value)} rows={2} placeholder="Internal notes..." />
+            </div>
+            <div className="space-y-2">
+                <Label>Songs (in order)</Label>
+                <div className="border rounded-md p-3 min-h-[60px] bg-muted/20 space-y-1">
+                    {songIds.length === 0 ? (
+                        <p className="text-sm text-muted-foreground">No songs. Add below.</p>
+                    ) : (
+                        songIds.map((id, i) => {
+                            const song = allSongs.find(s => s.id === id)
+                            return (
+                                <div key={id} className="flex items-center justify-between bg-background p-2 rounded border">
+                                    <span className="text-sm">{i + 1}. {song?.title || `Song ${id}`}</span>
+                                    <div className="flex gap-1">
+                                        <Button variant="ghost" size="sm" onClick={() => moveSong(i, -1)} disabled={i === 0}>
+                                            ↑
+                                        </Button>
+                                        <Button variant="ghost" size="sm" onClick={() => moveSong(i, 1)} disabled={i === songIds.length - 1}>
+                                            ↓
+                                        </Button>
+                                        <Button variant="ghost" size="sm" onClick={() => removeSong(id)} className="text-red-600">
+                                            <X className="h-4 w-4" />
+                                        </Button>
+                                    </div>
+                                </div>
+                            )
+                        })
+                    )}
+                </div>
+            </div>
+            <div className="space-y-2">
+                <Label>Add Songs</Label>
+                <Input placeholder="Search songs..." value={songSearch} onChange={e => setSongSearch(e.target.value)} />
+                {songSearch && (
+                    <div className="border rounded-md max-h-40 overflow-y-auto">
+                        {filteredSongs.map(song => (
+                            <button key={song.id} className="w-full text-left px-3 py-2 hover:bg-muted/50 border-b last:border-b-0 text-sm" onClick={() => addSong(song.id)}>
+                                {song.title}
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+            <DialogFooter>
+                <Button variant="outline" onClick={onCancel}>Cancel</Button>
+                <Button onClick={handleSave} disabled={saving || !name}>
+                    <Save className="h-4 w-4 mr-2" />
+                    {saving ? "Saving..." : "Save Changes"}
+                </Button>
+            </DialogFooter>
+        </div>
+    )
+}
+
 export default function AdminSequencesPage() {
     const { user, token, loading: authLoading } = useAuth()
     const router = useRouter()
@@ -340,26 +461,24 @@ export default function AdminSequencesPage() {
                 </DialogContent>
             </Dialog>
 
-            {/* Edit Dialog (simplified for now) */}
+            {/* Edit Dialog */}
             <Dialog open={!!editingSequence} onOpenChange={() => setEditingSequence(null)}>
-                <DialogContent className="max-w-lg">
+                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
-                        <DialogTitle>Edit: {editingSequence?.name}</DialogTitle>
+                        <DialogTitle>Edit Sequence</DialogTitle>
                     </DialogHeader>
-                    <div className="py-4">
-                        <p className="text-muted-foreground mb-4">
-                            Songs: {editingSequence?.songs.map(s => s.song_title).join(" > ") || "None"}
-                        </p>
-                        <p className="text-sm text-muted-foreground">
-                            Full edit functionality coming soon. For now, delete and recreate to modify.
-                        </p>
-                    </div>
-                    <DialogFooter>
-                        <Button variant="outline" onClick={() => setEditingSequence(null)}>
-                            <X className="h-4 w-4 mr-2" />
-                            Close
-                        </Button>
-                    </DialogFooter>
+                    {editingSequence && (
+                        <EditSequenceForm
+                            sequence={editingSequence}
+                            allSongs={allSongs}
+                            token={token!}
+                            onSave={() => {
+                                fetchSequences()
+                                setEditingSequence(null)
+                            }}
+                            onCancel={() => setEditingSequence(null)}
+                        />
+                    )}
                 </DialogContent>
             </Dialog>
         </div>