import { CircleAlertIcon } from 'lucide-react'
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/reui/alert'
import { Button } from '@evofw/ui/components/button'
import { Skeleton } from '@evofw/ui/components/skeleton'

interface QueryStateProps {
  isLoading?: boolean
  isError?: boolean
  hasData?: boolean
  error?: Error | null
  onRetry?: () => void
  skeleton?: React.ReactNode
  children: React.ReactNode
}

function DefaultSkeleton() {
  return (
    <div className="flex flex-col gap-4">
      <Skeleton className="h-8 w-1/3" />
      <Skeleton className="h-40 w-full" />
      <Skeleton className="h-40 w-full" />
    </div>
  )
}

export function QueryState({
  isLoading,
  isError,
  hasData = false,
  error,
  onRetry,
  skeleton,
  children,
}: QueryStateProps) {
  // Keep the child at the same reconciliation position when a background
  // request fails. Changing the wrapper would unmount uncontrolled form fields.
  return (
    <>
      {isLoading ? (
        <div role="status" aria-live="polite" aria-busy="true">
          {skeleton ?? <DefaultSkeleton />}
        </div>
      ) : isError ? (
        <Alert variant="destructive">
        <CircleAlertIcon />
        <AlertTitle>{hasData ? 'Не удалось обновить данные — показана предыдущая версия' : 'Не удалось загрузить данные'}</AlertTitle>
        <AlertDescription className="flex flex-col gap-2">
          <span>{error?.message ?? 'Произошла ошибка при загрузке.'}</span>
          {onRetry ? (
            <Button variant="outline" size="sm" onClick={onRetry}>
              Повторить
            </Button>
          ) : null}
        </AlertDescription>
        </Alert>
      ) : null}
      {!isLoading && (!isError || hasData) ? children : null}
    </>
  )
}