import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { scenarios } from '../api';
import type { Scenario } from '../api';
import { Button, Table, type TableColumn, Timestamp } from '../ui';
import styles from './Page.module.css';

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

  const load = useCallback(() => {
    scenarios
      .list()
      .then((res) => setItems(res.data))
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const handleRun = async (id: number) => {
    await scenarios.run(id);
  };

  const handleDelete = async (id: number) => {
    await scenarios.remove(id);
    setLoading(true);
    load();
  };

  const columns: TableColumn<Scenario>[] = [
    { key: 'id', header: t('scenarios.col_id'), render: (s) => s.id, width: 60 },
    { key: 'name', header: t('scenarios.col_name'), render: (s) => s.name },
    {
      key: 'updated',
      header: t('scenarios.col_updated'),
      width: 140,
      render: (s) => <Timestamp value={s.updatedAt} />,
    },
    {
      key: 'actions',
      header: '',
      width: 140,
      align: 'right',
      render: (s) => (
        <span style={{ display: 'inline-flex', gap: 6 }}>
          <Button size="sm" onClick={() => handleRun(s.id)}>
            {t('scenarios.action_run')}
          </Button>
          <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
            {t('scenarios.action_delete')}
          </Button>
        </span>
      ),
    },
  ];

  return (
    <div>
      <h1 className={styles.heading}>{t('scenarios.title')}</h1>
      {error && <p className={styles.error}>{error}</p>}
      <Table
        columns={columns}
        data={items}
        rowKey={(s) => s.id}
        loading={loading}
        emptyMessage={t('scenarios.empty')}
      />
    </div>
  );
}