import type { RestoreStatusResponse } from '@dorfteich/shared';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { apiGet } from '../lib/api';

const POLL_INTERVAL_MS = 3000;

/**
 * The status page behind maintenance mode (issue #103): while a backup
 * restore runs, every api call answers 503, and this screen polls the one
 * exempt endpoint. Once the restore is over and the api answers again, the
 * page reloads itself — after a successful restore the whole client state
 * is stale anyway.
 */
export function MaintenancePage(): React.JSX.Element {
  const { t } = useTranslation('system');
  const [status, setStatus] = useState<RestoreStatusResponse | null>(null);

  useEffect(() => {
    let cancelled = false;
    const poll = async (): Promise<void> => {
      let current: RestoreStatusResponse | null = null;
      try {
        current = await apiGet<RestoreStatusResponse>('/backup/restore-status');
      } catch {
        current = null; // api restarting — keep waiting
      }
      if (cancelled) return;
      setStatus(current);
      if (current && current.state !== 'running' && current.state !== 'failed') {
        // idle or succeeded: check the api serves normally again, then reload.
        try {
          await apiGet('/healthz');
          if (!cancelled) window.location.reload();
          return;
        } catch {
          // still restarting
        }
      }
      if (!cancelled) setTimeout(() => void poll(), POLL_INTERVAL_MS);
    };
    void poll();
    return () => {
      cancelled = true;
    };
  }, []);

  const failedStatus = status !== null && status.state === 'failed' ? status : null;
  return (
    <div className="maintenance-page" role="status">
      <h1>{t('maintenance.title')}</h1>
      <p>{t('maintenance.body')}</p>
      {failedStatus ? (
        <>
          <p className="maintenance-page__error">
            {t('maintenance.failed', { error: failedStatus.error ?? '' })}
          </p>
          <button type="button" className="button" onClick={() => window.location.reload()}>
            {t('maintenance.reload')}
          </button>
        </>
      ) : (
        <p>{t('maintenance.waiting')}</p>
      )}
    </div>
  );
}