import type { components } from '@pipu/api-client';
import { useId } from 'react';
import { useTranslation } from 'react-i18next';

import { formatDateTime } from '../../shared/lib/format';
import { cx } from '../../shared/ui/ui';
import s from './library.module.css';

type ScanProgress = components['schemas']['ScanProgress'];
export type SourceStatus = components['schemas']['SourceStatus'];

export function StatusBadge({ status }: { status: SourceStatus }) {
  const { t } = useTranslation('admin');
  return <span className={cx(s.status, s[`st_${status}`])}>{t(`sources.status_${status}`)}</span>;
}

/** Прогресс идущего скана или итог последнего. */
export function ScanLine({ scan, lastScanAt }: { scan: ScanProgress | null; lastScanAt: string | null }) {
  const { t, i18n } = useTranslation('admin');
  const id = useId();
  if (scan?.running) {
    const pct = scan.to_process > 0 ? Math.round((scan.processed / scan.to_process) * 100) : 0;
    return (
      <div className={s.scan}>
        <div className={s.scanText} id={id}>
          {scan.found === 0 ? t('sources.scan_walking') : t('sources.scanning', { processed: scan.processed, total: scan.to_process })}
        </div>
        <div className={s.bar} role="progressbar" aria-labelledby={id} aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100}>
          <span style={{ width: `${pct}%` }} />
        </div>
      </div>
    );
  }
  return (
    <div className={s.scan}>
      <div className={s.scanText}>
        {lastScanAt ? t('sources.last_scan', { date: formatDateTime(lastScanAt, i18n.language) }) : t('sources.never_scanned')}
      </div>
      {scan?.error ? (
        <div className={s.scanError}>{t('sources.scan_failed', { error: scan.error })}</div>
      ) : (
        scan && <div className={s.scanSummary}>{t('sources.scan_done', { ...scan })}</div>
      )}
    </div>
  );
}