import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { keys } from '../api';
import { Breadcrumbs, Table, type TableColumn } from '../ui';
import styles from './Page.module.css';

interface KeyRow {
  name: string;
}

export function KeysPage() {
  const { t } = useTranslation();
  const [items, setItems] = useState<KeyRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const columns: TableColumn<KeyRow>[] = [
    { key: 'name', header: t('keys.col_name'), render: (k) => k.name },
  ];

  useEffect(() => {
    keys
      .list()
      .then((res) => setItems(res.keys.map((name) => ({ name }))))
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  return (
    <div>
      <Breadcrumbs items={[{ label: t('keys.title') }]} className={styles.breadcrumbs} />
      {error && <p className={styles.error}>{error}</p>}
      <Table
        columns={columns}
        data={items}
        rowKey={(k) => k.name}
        loading={loading}
        emptyMessage={t('keys.empty')}
        pageSize={10}
        pageSizeOptions={[10, 25, 50]}
      />
    </div>
  );
}