import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { ChevronDown, ChevronRight, Plus, Wand2 } from 'lucide-react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { qk } from '@/shared/api/query-keys'
import type { GroupSuggestionDto } from '@/shared/api/types'
import { useApiError } from '@/shared/lib/use-api-error'
import { Badge } from '@/shared/ui/badge'
import { Button } from '@/shared/ui/button'
import { toast } from '@/shared/ui/toast-store'
import { createGroupFromSuggestion, suggestGroups } from './api'
import { DurationLabel } from './DurationLabel'

/**
 * Что имеет смысл завести группой при нынешней библиотеке. Разбор делает сервер (жанры, типы,
 * рейтинги, крупные сериалы), здесь — только показ и кнопка.
 *
 * Уже созданное по умолчанию скрыто: строка без кнопки — это шум, а список должен состоять из того,
 * что можно сделать. Но и пропадать бесследно оно не должно, иначе непонятно, куда делось
 * предложение, — поэтому счётчик скрытого виден и раскрывается.
 */
export function GroupSuggestions() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const onError = useApiError()
  // Свёрнуто по умолчанию: предложения — подсказка, а не главное на экране, и развёрнутый
  // список из десятка строк отодвигал бы сам справочник за нижний край.
  const [collapsed, setCollapsed] = useState(true)
  const [showExisting, setShowExisting] = useState(false)

  const { data, isLoading } = useQuery({
    queryKey: qk.groups.suggestions,
    queryFn: suggestGroups,
  })

  const create = useMutation({
    mutationFn: (suggestion: GroupSuggestionDto) => createGroupFromSuggestion(suggestion.key),
    onSuccess: () => {
      toast.success(t('admin.groups.suggestions.created'))
      void queryClient.invalidateQueries({ queryKey: qk.groups.all })
    },
    onError,
  })

  // Пока предлагать нечего (пустая библиотека или всё уже создано) — секции нет вовсе.
  if (isLoading || !data || data.length === 0) return null

  const fresh = data.filter((s) => !s.alreadyExists)
  const existing = data.length - fresh.length
  const visible = showExisting ? data : fresh

  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground"
          onClick={() => setCollapsed((v) => !v)}
        >
          {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          <Wand2 className="h-4 w-4" />
          {t('admin.groups.suggestions.title')}
          <Badge variant="muted">{fresh.length}</Badge>
        </button>
      </div>

      {!collapsed && (
        <>
          <p className="text-xs text-muted-foreground">{t('admin.groups.suggestions.hint')}</p>
          {visible.length === 0 && (
            <p className="text-sm text-muted-foreground">
              {t('admin.groups.suggestions.allCreated')}
            </p>
          )}
          <ul
            className={`crt-panel divide-y divide-border rounded-md text-sm ${
              visible.length === 0 ? 'hidden' : ''
            }`}
          >
            {visible.map((suggestion) => (
              <li key={suggestion.key} className="flex flex-wrap items-center gap-2 px-4 py-2">
                <span className="min-w-0 flex-1 truncate font-medium">{suggestion.name}</span>
                <Badge variant="muted">
                  {t(`admin.groups.suggestions.kinds.${suggestion.kind}`)}
                </Badge>
                <span className="text-muted-foreground">
                  {t('admin.groups.suggestions.stats', {
                    shows: suggestion.showCount,
                    units: suggestion.unitCount,
                  })}
                </span>
                <span className="text-muted-foreground">
                  <DurationLabel seconds={suggestion.totalDurationSeconds} />
                </span>
                {suggestion.alreadyExists ? (
                  <Badge variant="muted">{t('admin.groups.suggestions.exists')}</Badge>
                ) : (
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={create.isPending}
                    onClick={() => create.mutate(suggestion)}
                  >
                    <Plus className="h-4 w-4" />
                    {t('common.create')}
                  </Button>
                )}
              </li>
            ))}
          </ul>
          {existing > 0 && (
            <button
              type="button"
              className="self-start text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
              onClick={() => setShowExisting((v) => !v)}
            >
              {showExisting
                ? t('admin.groups.suggestions.hideExisting')
                : t('admin.groups.suggestions.showExisting', { count: existing })}
            </button>
          )}
        </>
      )}
    </div>
  )
}
