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

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

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

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

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

  const columns: TableColumn<Session>[] = [
    { key: 'id', header: t('sessions.col_id'), render: (s) => s.id, width: 60 },
    { key: 'name', header: t('sessions.col_name'), render: (s) => s.sessionName },
    {
      key: 'status',
      header: t('sessions.col_status'),
      width: 100,
      render: (s) => (
        <Badge variant={s.status === 'open' ? 'success' : 'neutral'}>{s.status}</Badge>
      ),
    },
    {
      key: 'lastUsed',
      header: t('sessions.col_lastUsed'),
      width: 160,
      render: (s) => (s.lastUsedAt ? <Timestamp value={s.lastUsedAt} /> : '—'),
    },
    {
      key: 'actions',
      header: '',
      width: 80,
      align: 'right',
      render: (s) => (
        <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
          {t('sessions.action_delete')}
        </Button>
      ),
    },
  ];

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