import { ButtonLink, Button } from '../../components/Button';
import { Card } from '../../components/Card';
import { EmptyState } from '../../components/EmptyState';
import { Icon } from '../../design/Icon';
import { useI18n } from '../../i18n/useI18n';
import { paths } from '../../app/routes';
import { writeErrorKey } from './accountWrites';
import styles from './PageStates.module.css';

/**
 * The first snapshot pull (SPEC §15.6 "loading"): design-spec §3.6 hero `Loading` content, announced politely.
 * `compact` drops the body line (account pages).
 */
export function LoadingCard({ compact = false }: { compact?: boolean }) {
  const { t } = useI18n();
  return (
    <Card className={styles.loading}>
      <div role="status" className={styles.loadingInner}>
        <span className={styles.spinnerTile} aria-hidden="true">
          <Icon name="sync" size={28} className={styles.spinner} />
        </span>
        <p className={styles.loadingTitle}>{t('home_loading')}</p>
        {compact ? null : <p className={styles.muted}>{t('home_loading_body')}</p>}
      </div>
    </Card>
  );
}

/** A failed read of the snapshot with nothing to show yet (SPEC §15.6 "error, with retry"). */
export function LoadFailedCard({ error, onRetry }: { error: unknown; onRetry: () => void }) {
  const { t } = useI18n();
  return (
    <Card className={styles.failed}>
      <div role="alert" className={styles.failedInner}>
        <Icon name="warning" filled size={24} className={styles.warning} />
        <div className={styles.failedText}>
          <h2 className={styles.failedTitle}>{t('web_accounts_load_failed')}</h2>
          <p className={styles.muted}>{t(writeErrorKey(error))}</p>
        </div>
      </div>
      <div>
        <Button variant="tonal" icon={<Icon name="refresh" size={20} />} onClick={onRetry}>
          {t('common_retry')}
        </Button>
      </div>
    </Card>
  );
}

/** An account id that is not (or no longer) in the snapshot. */
export function AccountNotFound() {
  const { t } = useI18n();
  return (
    <EmptyState
      icon="info"
      title={t('error_not_found')}
      body={t('web_accounts_not_found_body')}
      action={
        <ButtonLink to={paths.home} variant="tonal">
          {t('web_not_found_action')}
        </ButtonLink>
      }
    />
  );
}