import { useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Check, Pencil, Plus, Trash2, X } from 'lucide-react'
import { createAdminTeam, deleteAdminTeam, listAdminTeams, renameAdminTeam, type TeamOut } from '@/api/admin'
import { ApiError } from '@/api/client'
import { useToast } from '@/components/ui/ToastProvider'

const PAGE_SIZE = 20

/**
 * Вкладка «Команды» админки — список команд с датой создания, добавление,
 * инлайн-переименование и удаление с подтверждением. В макете
 * `design/mockups/admin.html` отдельного экрана для команд нет — вкладка
 * построена по паттерну `table-card`/`toolbar-row`/`row-actions` того же
 * макета и `admin.css` (тот же приём, что и вкладка «Настройки»,
 * см. комментарий в `AdminPage.tsx`).
 */
export function AdminTeamsTab() {
  const [offset, setOffset] = useState(0)
  const [newName, setNewName] = useState('')
  const [editingId, setEditingId] = useState<string | null>(null)
  const [editingName, setEditingName] = useState('')
  const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null)
  const queryClient = useQueryClient()
  const toast = useToast()

  const { data, isLoading } = useQuery({
    queryKey: ['admin', 'teams', offset],
    queryFn: () => listAdminTeams({ limit: PAGE_SIZE, offset }),
  })

  function invalidate() {
    queryClient.invalidateQueries({ queryKey: ['admin', 'teams'] })
  }

  const createMutation = useMutation({
    mutationFn: (name: string) => createAdminTeam(name),
    onSuccess: () => {
      invalidate()
      toast.show('Команда добавлена', 'success')
      setNewName('')
    },
    onError: (err: unknown) => {
      if (err instanceof ApiError && err.status === 409) {
        toast.show('Команда с таким названием уже есть', 'error')
      } else {
        toast.show('Не удалось добавить команду', 'error')
      }
    },
  })

  const renameMutation = useMutation({
    mutationFn: ({ id, name }: { id: string; name: string }) => renameAdminTeam(id, name),
    onSuccess: () => {
      invalidate()
      toast.show('Команда переименована', 'success')
      setEditingId(null)
    },
    onError: (err: unknown) => {
      if (err instanceof ApiError && err.status === 409) {
        toast.show('Команда с таким названием уже есть', 'error')
      } else {
        toast.show('Не удалось переименовать команду', 'error')
      }
    },
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => deleteAdminTeam(id),
    onSuccess: () => {
      invalidate()
      toast.show('Команда удалена', 'success')
      setConfirmingDeleteId(null)
    },
    onError: () => {
      toast.show('Не удалось удалить команду', 'error')
      setConfirmingDeleteId(null)
    },
  })

  function handleCreate() {
    const name = newName.trim()
    if (!name) return
    createMutation.mutate(name)
  }

  function startEditing(team: TeamOut) {
    setEditingId(team.id)
    setEditingName(team.name)
  }

  function handleRenameSubmit(id: string) {
    const name = editingName.trim()
    if (!name) return
    renameMutation.mutate({ id, name })
  }

  const items = data?.items ?? []
  const total = data?.total ?? 0

  return (
    <>
      <div className="toolbar-row">
        <form
          className="team-add-form"
          onSubmit={(e) => {
            e.preventDefault()
            handleCreate()
          }}
        >
          <input
            type="text"
            placeholder="Название новой команды…"
            value={newName}
            maxLength={255}
            onChange={(e) => setNewName(e.target.value)}
            aria-label="Название новой команды"
          />
          <button type="submit" className="btn btn-primary" disabled={createMutation.isPending || !newName.trim()}>
            <Plus style={{ width: 16, height: 16 }} aria-hidden="true" />
            Добавить команду
          </button>
        </form>
        <span className="toolbar-count">
          {isLoading ? 'Загрузка…' : `Показано ${items.length ? offset + 1 : 0}–${offset + items.length} из ${total}`}
        </span>
      </div>

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th>Название</th>
              <th>Создана</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {items.length === 0 && !isLoading && (
              <tr>
                <td colSpan={3} style={{ textAlign: 'center', color: 'var(--color-ink-500)' }}>
                  Команды не найдены
                </td>
              </tr>
            )}
            {items.map((team) => (
              <tr key={team.id}>
                <td>
                  {editingId === team.id ? (
                    <form
                      className="team-rename-form"
                      onSubmit={(e) => {
                        e.preventDefault()
                        handleRenameSubmit(team.id)
                      }}
                    >
                      <input
                        type="text"
                        value={editingName}
                        maxLength={255}
                        autoFocus
                        onChange={(e) => setEditingName(e.target.value)}
                        aria-label="Новое название команды"
                      />
                    </form>
                  ) : (
                    team.name
                  )}
                </td>
                <td>{new Date(team.created_at).toLocaleDateString('ru-RU')}</td>
                <td>
                  {editingId === team.id ? (
                    <div className="row-actions">
                      <button
                        type="button"
                        className="icon-btn"
                        aria-label="Сохранить название"
                        disabled={renameMutation.isPending}
                        onClick={() => handleRenameSubmit(team.id)}
                      >
                        <Check style={{ width: 16, height: 16 }} aria-hidden="true" />
                      </button>
                      <button type="button" className="icon-btn" aria-label="Отмена" onClick={() => setEditingId(null)}>
                        <X style={{ width: 16, height: 16 }} aria-hidden="true" />
                      </button>
                    </div>
                  ) : confirmingDeleteId === team.id ? (
                    <div className="row-actions">
                      <button
                        type="button"
                        className="icon-btn danger"
                        aria-label="Подтвердить удаление"
                        disabled={deleteMutation.isPending}
                        onClick={() => deleteMutation.mutate(team.id)}
                      >
                        <Check style={{ width: 16, height: 16 }} aria-hidden="true" />
                      </button>
                      <button type="button" className="icon-btn" aria-label="Отмена" onClick={() => setConfirmingDeleteId(null)}>
                        <X style={{ width: 16, height: 16 }} aria-hidden="true" />
                      </button>
                    </div>
                  ) : (
                    <div className="row-actions">
                      <button type="button" className="icon-btn" aria-label="Переименовать" onClick={() => startEditing(team)}>
                        <Pencil style={{ width: 16, height: 16 }} aria-hidden="true" />
                      </button>
                      <button
                        type="button"
                        className="icon-btn danger"
                        aria-label="Удалить"
                        onClick={() => setConfirmingDeleteId(team.id)}
                      >
                        <Trash2 style={{ width: 16, height: 16 }} aria-hidden="true" />
                      </button>
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {total > PAGE_SIZE && (
        <div className="pagination-row">
          <button type="button" className="btn btn-secondary" disabled={offset === 0} onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}>
            Назад
          </button>
          <button
            type="button"
            className="btn btn-secondary"
            disabled={offset + PAGE_SIZE >= total}
            onClick={() => setOffset(offset + PAGE_SIZE)}
          >
            Далее
          </button>
        </div>
      )}
    </>
  )
}
