import { useTranslation } from 'react-i18next'
import { cn } from '@/shared/lib/cn'
import { Card, CardContent } from '@/shared/ui/card'
import { Skeleton } from '@/shared/ui/skeleton'

/**
 * Сколько областей вернёт сервер, заранее не знаем — берём типичные пять. Ширины разные: названия
 * областей тоже разной длины, и одинаковые полосы выглядят как сломанная таблица.
 */
const AREA_ROWS = ['w-40', 'w-40', 'w-28', 'w-24', 'w-36']

/** Подсказки областей разной длины — одинаковые полосы выдают заглушку сильнее, чем нужно. */
const AREA_HINTS = ['w-72', 'w-80', 'w-64', 'w-56', 'w-72']

/**
 * Строка-заглушка ростом ровно в одну строку текста (`1lh`), полоса внутри — доля кегля. Так
 * скелетон занимает ту же высоту, что и будущий текст, и заодно получает то же внутреннее поле
 * над и под, а не упирается в край карточки.
 */
function TextLine({ className, width }: Readonly<{ className?: string; width: string }>) {
  return (
    <span className={cn('flex h-[1lh] items-center', className)}>
      <Skeleton className={cn('h-[0.7em]', width)} />
    </span>
  )
}

/**
 * Скелетон панели хранилища: подсчёт размеров идёт по диску и занимает секунды. Повторяет вёрстку
 * {@link StoragePanel} блок в блок, чтобы после загрузки ничего не переехало.
 */
export function StoragePanelSkeleton() {
  const { t } = useTranslation()

  return (
    // <output> вместо role="status": у него та же роль нативно, и её видят читалки,
    // которые про ARIA-роль на div знают хуже.
    <output className="flex flex-col gap-4" aria-label={t('common.loading')}>
      <Card>
        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="flex flex-col">
              <TextLine className="text-sm" width="w-32" />
              <TextLine className="text-xs" width="w-44" />
            </div>
            <div className="flex items-center gap-3">
              <TextLine className="text-xs" width="w-36" />
              {/* Кнопка «Пересчитать» — размер sm, иначе шапка подпрыгнет на загрузке. */}
              <Skeleton className="h-9 w-40" />
            </div>
          </div>

          <Skeleton className="h-4 w-full rounded-full" />

          <div className="grid gap-3 text-sm sm:grid-cols-4">
            {['w-28', 'w-32', 'w-32', 'w-24'].map((label, i) => (
              <div key={label + i} className="flex flex-col">
                <TextLine className="text-xs" width={label} />
                <TextLine className="text-lg" width="w-24" />
                <TextLine className="text-xs" width={i === 2 ? 'w-40' : 'w-12'} />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="flex flex-col gap-4">
          {/* У реального заголовка выравнивание по базовой линии; у полос базовой линии нет,
              поэтому центрируем — разница в высоте строк тут меньше пяти пикселей. */}
          <div className="flex flex-wrap items-center justify-between gap-2">
            <TextLine className="text-sm" width="w-48" />
            <TextLine className="text-xs" width="w-48" />
          </div>

          <Skeleton className="h-3 w-full rounded-full" />

          <div className="flex flex-col divide-y divide-border">
            {AREA_ROWS.map((name, i) => (
              <div
                key={name + i}
                className="flex flex-wrap items-center gap-x-3 gap-y-1 py-2 text-sm"
              >
                <Skeleton className="h-3 w-3 shrink-0" />
                <div className="flex min-w-48 flex-col">
                  <TextLine className="text-sm" width={name} />
                  <TextLine className="text-xs" width={AREA_HINTS[i]} />
                </div>
                <TextLine className="ml-auto text-sm" width="w-20" />
                <TextLine className="w-14 justify-end text-xs" width="w-10" />
                <TextLine className="w-24 justify-end text-xs" width="w-20" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </output>
  )
}
