'use client';

import { useState } from 'react';

import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

import { usePlenaries } from '../hook/use-plenaries';
import { PlenaryCreateDialog } from './plenary-create-dialog';
import { PlenaryFilters } from './plenary-filters';
import { PlenaryHeader } from './plenary-header';
import { PlenaryTable } from './plenary-table';

export function PlenariesScreen() {
  const [openCreate, setOpenCreate] = useState(false);

  const {
    items,
    meta,
    loading,
    error,
    filters,
    loadPlenaries,
    applyFilters,
  } = usePlenaries();

  return (
    <Box
      sx={{
        p: 3,
        minHeight: '100vh',
        bgcolor: 'background.default',
        color: 'text.primary',
      }}
    >
      <PlenaryHeader onCreate={() => setOpenCreate(true)} />

      <Typography
        sx={{
          mb: 4,
          color: 'text.secondary',
          fontSize: 14,
        }}
      >
        All Plenary
      </Typography>

      <PlenaryFilters
        value={filters}
        onChange={applyFilters}
      />

      {error ? (
        <Alert severity="error" sx={{ mb: 2 }}>
          {error}
        </Alert>
      ) : null}

      <PlenaryTable
        items={items}
        meta={meta}
        loading={loading}
        onPageChange={(page) => {
          void loadPlenaries(page, meta.limit);
        }}
        onReload={() => {
          void loadPlenaries(meta.page, meta.limit);
        }}
      />

      <PlenaryCreateDialog
        open={openCreate}
        onClose={() => setOpenCreate(false)}
        onCreated={() => {
          setOpenCreate(false);
          void loadPlenaries(1, meta.limit);
        }}
      />
    </Box>
  );
}