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-text-tertiary">
        <Link to="/admin/genlockes" className="hover:underline">
          Genlockes
        </Link>
        {' / '}
        <span className="text-text-primary">{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-text-tertiary 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 bg-surface-2 border-border-default"
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-text-tertiary mb-1">Status</label>
            <select
              value={editStatus}
              onChange={(e) => setStatus(e.target.value)}
              className="px-3 py-2 border rounded-md bg-surface-2 border-border-default"
            >
              <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-accent-600 text-white hover:bg-accent-500 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-status-failed hover:bg-red-50 dark:hover:bg-red-900/20"
          >
            Delete
          </button>
        </div>
        <p className="text-sm text-text-tertiary">
          Created {new Date(genlocke.createdAt).toLocaleDateString()}
        </p>
      </div>

      {/* Rules (read-only) */}
      <div className="mb-6 p-4 bg-surface-1 rounded-lg">
        <h3 className="text-sm font-semibold mb-2 text-text-secondary">Rules</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-text-tertiary">Genlocke rules:</span>
            <pre className="mt-1 text-xs bg-surface-0 p-2 rounded border border-border-default overflow-x-auto">
              {JSON.stringify(genlocke.genlockeRules, null, 2)}
            </pre>
          </div>
          <div>
            <span className="text-text-tertiary">Nuzlocke rules:</span>
            <pre className="mt-1 text-xs bg-surface-0 p-2 rounded border border-border-default 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-accent-600 text-white hover:bg-accent-500"
          >
            Add Leg
          </button>
        </div>

        {addingLeg && (
          <div className="mb-4 flex items-center gap-3 p-3 bg-surface-1 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 bg-surface-2 border-border-default"
            >
              <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-border-default hover:bg-surface-2"
            >
              Cancel
            </button>
          </div>
        )}

        {genlocke.legs.length === 0 ? (
          <div className="text-center py-8 text-text-tertiary border border-border-default rounded-lg">
            No legs yet. Add one to get started.
          </div>
        ) : (
          <div className="border border-border-default rounded-lg overflow-hidden">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-border-default">
                <thead className="bg-surface-1">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary uppercase tracking-wider w-16">
                      Order
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary uppercase tracking-wider">
                      Game
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary uppercase tracking-wider">
                      Run
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary uppercase tracking-wider">
                      Status
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary uppercase tracking-wider w-20">
                      Enc.
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary uppercase tracking-wider w-20">
                      Deaths
                    </th>
                    <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary uppercase tracking-wider w-20">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-surface-0 divide-y divide-border-default">
                  {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-text-link hover:underline"
                          >
                            Run #{leg.runId}
                          </Link>
                        ) : (
                          <span className="text-gray-400">&mdash;</span>
                        )}
                      </td>
                      <td className="px-4 py-3 text-sm whitespace-nowrap">
                        {leg.runStatus ? (
                          <span
                            className={
                              leg.runStatus === 'active'
                                ? 'text-status-active'
                                : leg.runStatus === 'completed'
                                  ? 'text-text-link'
                                  : 'text-status-failed'
                            }
                          >
                            {leg.runStatus}
                          </span>
                        ) : (
                          <span className="text-gray-400">&mdash;</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-status-failed 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-surface-1 rounded-lg">
        <h3 className="text-sm font-semibold mb-2 text-text-secondary">Stats</h3>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
          <div>
            <span className="text-text-tertiary">Legs</span>
            <p className="text-lg font-semibold">
              {genlocke.stats.legsCompleted} / {genlocke.stats.totalLegs}
            </p>
          </div>
          <div>
            <span className="text-text-tertiary">Encounters</span>
            <p className="text-lg font-semibold">{genlocke.stats.totalEncounters}</p>
          </div>
          <div>
            <span className="text-text-tertiary">Deaths</span>
            <p className="text-lg font-semibold">{genlocke.stats.totalDeaths}</p>
          </div>
          <div>
            <span className="text-text-tertiary">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>
  )
}