import { type ReactNode } from 'react';
import { useI18n } from '../i18n';
import { useSession } from '../state/session';

/**
 * A workspace with no tables in it — which, since a new workspace starts empty,
 * is the first screen almost everyone sees.
 *
 * It makes one offer, because the people arriving here overwhelmingly already
 * have the thing they want to replace: bring the spreadsheet. Defining a table
 * by hand is the fallback for those who do not. The demo is not offered here
 * at all — it belongs to workspace creation, in the picker — because starting
 * someone's real workspace with invented orders is a worse outcome than
 * starting it with nothing.
 *
 * A viewer gets none of it, and is told why rather than shown buttons that
 * would all fail.
 */
export function EmptyWorkspace({
  onAddTable,
  onImport,
}: {
  onAddTable(): void;
  onImport(): void;
}): ReactNode {
  const session = useSession();
  const { t } = useI18n();
  const isAdmin = session.can('admin');

  if (!isAdmin) {
    return (
      <div className="gridstate">
        <div className="empty">
          <h2>{t('empty.nothingTitle')}</h2>
          <p className="hint">{t('empty.viewerHint')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="gridstate">
      <div className="empty">
        <h2>{t('empty.bringTitle')}</h2>
        <p className="hint">{t('empty.bringHint')}</p>

        <div className="rowend" style={{ justifyContent: 'center', marginTop: 18 }}>
          <button className="btn primary" onClick={onImport}>
            {t('import.title')}
          </button>
          <button className="btn" onClick={onAddTable}>
            {t('empty.defineTable')}
          </button>
        </div>
      </div>
    </div>
  );
}