320 lines
13 KiB
TypeScript
320 lines
13 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||
|
|
import { useGenlocke } from '../../hooks/useGenlockes'
|
||
|
|
import { useGames } from '../../hooks/useGames'
|
||
|
|
import {
|
||
|
|
useUpdateGenlocke,
|
||
|
|
useDeleteGenlocke,
|
||
|
|
useAddGenlockeLeg,
|
||
|
|
useDeleteGenlockeLeg,
|
||
|
|
} from '../../hooks/useAdmin'
|
||
|
|
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
|
||
|
|
|
||
|
|
export function AdminGenlockeDetail() {
|
||
|
|
const { genlockeId } = useParams<{ genlockeId: string }>()
|
||
|
|
const id = Number(genlockeId)
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const { data: genlocke, isLoading } = useGenlocke(id)
|
||
|
|
const { data: games = [] } = useGames()
|
||
|
|
|
||
|
|
const updateGenlocke = useUpdateGenlocke()
|
||
|
|
const deleteGenlocke = useDeleteGenlocke()
|
||
|
|
const addLeg = useAddGenlockeLeg(id)
|
||
|
|
const deleteLeg = useDeleteGenlockeLeg(id)
|
||
|
|
|
||
|
|
const [name, setName] = useState<string | null>(null)
|
||
|
|
const [status, setStatus] = useState<string | null>(null)
|
||
|
|
const [showDelete, setShowDelete] = useState(false)
|
||
|
|
const [addingLeg, setAddingLeg] = useState(false)
|
||
|
|
const [selectedGameId, setSelectedGameId] = useState<number | ''>('')
|
||
|
|
|
||
|
|
if (isLoading) return <div className="py-8 text-center text-gray-500">Loading...</div>
|
||
|
|
if (!genlocke) return <div className="py-8 text-center text-gray-500">Genlocke not found</div>
|
||
|
|
|
||
|
|
const editName = name ?? genlocke.name
|
||
|
|
const editStatus = status ?? genlocke.status
|
||
|
|
|
||
|
|
const hasChanges = editName !== genlocke.name || editStatus !== genlocke.status
|
||
|
|
|
||
|
|
const handleSave = () => {
|
||
|
|
const data: Record<string, string> = {}
|
||
|
|
if (editName !== genlocke.name) data.name = editName
|
||
|
|
if (editStatus !== genlocke.status) data.status = editStatus
|
||
|
|
if (Object.keys(data).length === 0) return
|
||
|
|
updateGenlocke.mutate(
|
||
|
|
{ id, data },
|
||
|
|
{
|
||
|
|
onSuccess: () => {
|
||
|
|
setName(null)
|
||
|
|
setStatus(null)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleAddLeg = () => {
|
||
|
|
if (!selectedGameId) return
|
||
|
|
addLeg.mutate(
|
||
|
|
{ gameId: Number(selectedGameId) },
|
||
|
|
{
|
||
|
|
onSuccess: () => {
|
||
|
|
setAddingLeg(false)
|
||
|
|
setSelectedGameId('')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<nav className="text-sm mb-4 text-gray-500 dark:text-gray-400">
|
||
|
|
<Link to="/admin/genlockes" className="hover:underline">
|
||
|
|
Genlockes
|
||
|
|
</Link>
|
||
|
|
{' / '}
|
||
|
|
<span className="text-gray-900 dark:text-gray-100">{genlocke.name}</span>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Header */}
|
||
|
|
<div className="mb-6 space-y-4">
|
||
|
|
<div className="flex flex-wrap items-end gap-4">
|
||
|
|
<div className="flex-1 min-w-[200px]">
|
||
|
|
<label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||
|
|
Name
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={editName}
|
||
|
|
onChange={(e) => setName(e.target.value)}
|
||
|
|
className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||
|
|
Status
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={editStatus}
|
||
|
|
onChange={(e) => setStatus(e.target.value)}
|
||
|
|
className="px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
|
||
|
|
>
|
||
|
|
<option value="active">Active</option>
|
||
|
|
<option value="completed">Completed</option>
|
||
|
|
<option value="failed">Failed</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={handleSave}
|
||
|
|
disabled={!hasChanges || updateGenlocke.isPending}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{updateGenlocke.isPending ? 'Saving...' : 'Save'}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setShowDelete(true)}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
|
||
|
|
>
|
||
|
|
Delete
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||
|
|
Created {new Date(genlocke.createdAt).toLocaleDateString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Rules (read-only) */}
|
||
|
|
<div className="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||
|
|
<h3 className="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Rules</h3>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500 dark:text-gray-400">Genlocke rules:</span>
|
||
|
|
<pre className="mt-1 text-xs bg-white dark:bg-gray-900 p-2 rounded border dark:border-gray-700 overflow-x-auto">
|
||
|
|
{JSON.stringify(genlocke.genlockeRules, null, 2)}
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500 dark:text-gray-400">Nuzlocke rules:</span>
|
||
|
|
<pre className="mt-1 text-xs bg-white dark:bg-gray-900 p-2 rounded border dark:border-gray-700 overflow-x-auto">
|
||
|
|
{JSON.stringify(genlocke.nuzlockeRules, null, 2)}
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Legs */}
|
||
|
|
<div className="mb-6">
|
||
|
|
<div className="flex items-center justify-between mb-3">
|
||
|
|
<h3 className="text-lg font-semibold">Legs ({genlocke.legs.length})</h3>
|
||
|
|
<button
|
||
|
|
onClick={() => setAddingLeg(!addingLeg)}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
|
||
|
|
>
|
||
|
|
Add Leg
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{addingLeg && (
|
||
|
|
<div className="mb-4 flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||
|
|
<select
|
||
|
|
value={selectedGameId}
|
||
|
|
onChange={(e) => setSelectedGameId(e.target.value ? Number(e.target.value) : '')}
|
||
|
|
className="flex-1 px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
|
||
|
|
>
|
||
|
|
<option value="">Select a game...</option>
|
||
|
|
{games.map((g) => (
|
||
|
|
<option key={g.id} value={g.id}>
|
||
|
|
{g.name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<button
|
||
|
|
onClick={handleAddLeg}
|
||
|
|
disabled={!selectedGameId || addLeg.isPending}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md bg-green-600 text-white hover:bg-green-700 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{addLeg.isPending ? 'Adding...' : 'Add'}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
setAddingLeg(false)
|
||
|
|
setSelectedGameId('')
|
||
|
|
}}
|
||
|
|
className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{genlocke.legs.length === 0 ? (
|
||
|
|
<div className="text-center py-8 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 rounded-lg">
|
||
|
|
No legs yet. Add one to get started.
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||
|
|
<thead className="bg-gray-50 dark:bg-gray-800">
|
||
|
|
<tr>
|
||
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
|
||
|
|
Order
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||
|
|
Game
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||
|
|
Run
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||
|
|
Status
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-20">
|
||
|
|
Enc.
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-20">
|
||
|
|
Deaths
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-20">
|
||
|
|
Actions
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||
|
|
{genlocke.legs.map((leg) => (
|
||
|
|
<tr key={leg.id}>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap">{leg.legOrder}</td>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap">{leg.game.name}</td>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap">
|
||
|
|
{leg.runId ? (
|
||
|
|
<Link
|
||
|
|
to={`/runs/${leg.runId}`}
|
||
|
|
className="text-blue-600 dark:text-blue-400 hover:underline"
|
||
|
|
>
|
||
|
|
Run #{leg.runId}
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
<span className="text-gray-400">—</span>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap">
|
||
|
|
{leg.runStatus ? (
|
||
|
|
<span
|
||
|
|
className={
|
||
|
|
leg.runStatus === 'active'
|
||
|
|
? 'text-green-600 dark:text-green-400'
|
||
|
|
: leg.runStatus === 'completed'
|
||
|
|
? 'text-blue-600 dark:text-blue-400'
|
||
|
|
: 'text-red-600 dark:text-red-400'
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{leg.runStatus}
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<span className="text-gray-400">—</span>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap">{leg.encounterCount}</td>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap">{leg.deathCount}</td>
|
||
|
|
<td className="px-4 py-3 text-sm whitespace-nowrap text-right">
|
||
|
|
<button
|
||
|
|
onClick={() => deleteLeg.mutate(leg.id)}
|
||
|
|
disabled={leg.runId !== null || deleteLeg.isPending}
|
||
|
|
title={leg.runId !== null ? 'Cannot remove a leg with a linked run' : 'Remove leg'}
|
||
|
|
className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
|
||
|
|
>
|
||
|
|
Remove
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Stats */}
|
||
|
|
<div className="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||
|
|
<h3 className="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Stats</h3>
|
||
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500 dark:text-gray-400">Legs</span>
|
||
|
|
<p className="text-lg font-semibold">{genlocke.stats.legsCompleted} / {genlocke.stats.totalLegs}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500 dark:text-gray-400">Encounters</span>
|
||
|
|
<p className="text-lg font-semibold">{genlocke.stats.totalEncounters}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500 dark:text-gray-400">Deaths</span>
|
||
|
|
<p className="text-lg font-semibold">{genlocke.stats.totalDeaths}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500 dark:text-gray-400">Survival Rate</span>
|
||
|
|
<p className="text-lg font-semibold">
|
||
|
|
{genlocke.stats.totalEncounters > 0
|
||
|
|
? `${Math.round(((genlocke.stats.totalEncounters - genlocke.stats.totalDeaths) / genlocke.stats.totalEncounters) * 100)}%`
|
||
|
|
: '\u2014'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{showDelete && (
|
||
|
|
<DeleteConfirmModal
|
||
|
|
title={`Delete "${genlocke.name}"?`}
|
||
|
|
message="This will permanently delete the genlocke. Linked runs will be preserved but detached."
|
||
|
|
onConfirm={() =>
|
||
|
|
deleteGenlocke.mutate(id, {
|
||
|
|
onSuccess: () => navigate('/admin/genlockes'),
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onCancel={() => setShowDelete(false)}
|
||
|
|
isDeleting={deleteGenlocke.isPending}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|