import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { TasksApi } from '../../api/tasks';
import { TablesApi } from '../../api/tables';
import {
  TaskInfoContainer,
  NameTask,
} from '../../components/common/SwitchFormTask/SwitchFormTask.style';
import { Box, CircularProgress, Stack, Typography } from '@mui/material';
import { formatDate } from '../../utils/formatDate';
import { DateIcon, TableIcon } from '../../components/common/icons/icons';
import { Chip } from '../../components/styles/StyledChip';
import { IconWithContent } from '../../components/common/IconWithContent';
import SearchComponent from '../../components/common/SearchComponent';
import { BackButton } from '../../components/common/Buttons/BackButton';
import { toast } from 'react-toastify';
import { SettingModal as SettingStageModal } from '../../components/Stages/SettingModal';
import { PrimaryOutlinedButton } from '../../components/common/Buttons/Buttons';
import { FormsApi } from '../../api/forms';
import { ModalCreateProject } from './ModalCreateProject';
import { ExportWithTextButton } from '../../components/common/Buttons/ButtonsActions';
import { exportSingleForm } from '../../utils/exportForm';
import TablesList from '../../components/common/TableList/TableList';
import { SHEET_NAME } from '../../constants';

const TaskInfo = ({ task }) => {
  const portalContent = (
    <TaskInfoContainer>
      <BackButton to="/tasks" />
      <NameTask>{task.form_type_code}</NameTask>
    </TaskInfoContainer>
  );

  const targetElement = document.getElementById('TableInfo');

  if (targetElement) {
    return createPortal(portalContent, targetElement);
  }
};

export default function TaskPage() {
  const { taskId } = useParams();
  const navigate = useNavigate();
  const id = Number(taskId);
  const [task, setTask] = useState(null);
  const [tables, setTables] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [query, setQuery] = useState('');
  const [modalStageOpen, setModalStageOpen] = useState(false);
  const [modalProjectOpen, setModalProjectOpen] = useState(false);
  const [tempProjects, setTempProjects] = useState([]);
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    const getSheets = async () => {
      setIsLoading(true);
      try {
        const data = await TasksApi.getSheets(id);
        // Преобразуем данные с учетом direction
        const mappedTables = data.result.all_sheets.map(sheet => ({
          name: SHEET_NAME[sheet.sheet_name] || sheet.sheet_name,
          sheet: sheet.sheet_name,
          direction: sheet.direction
        }));
        setTables(mappedTables);
      } catch (error) {
        toast.error(
          error?.response?.data?.detail || 'Ошибка получения данных задачи',
        );
      } finally {
        setIsLoading(false);
      }
    };

    if (Number.isFinite(id)) {
      getSheets();
    }
  }, [id]);

  useEffect(() => {
    const getFormInfo = async () => {
      setIsLoading(true);
      try {
        const data = await TasksApi.getById(id);
        setTask(data.result);
      } catch (error) {
        // обработка ошибки
      } finally {
        setIsLoading(false);
      }
    };

    if (Number.isFinite(id)) {
      getFormInfo();
    }
  }, [id]);

  const handleCreateProject = (projectData) => {
    // логика создания проекта
  };

  // Фильтруем таблицы по query (учитывая name и direction)
  const filteredTables = tables.filter((item) => {
    const searchString = `${item.name} ${item.direction || ''}`.toLowerCase();
    return searchString.includes(query.toLowerCase());
  });

  if (isLoading) {
    return (
      <div className="flex justify-center pt-12">
        <CircularProgress />
      </div>
    );
  }

  return (
    <>
      {task && <TaskInfo task={task} />}
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          paddingTop: '2.5rem'
        }}
      >
        <Box sx={{ display: 'flex', gap: 2, flexDirection: 'column', width: '50rem' }}>
          <Box sx={{ display: 'flex', gap: 2 }}>
            <span>Выберите таблицу</span>
            <Chip>
              <IconWithContent icon={<TableIcon />}>
                <span>Таблиц: {tables.length}</span>
              </IconWithContent>
            </Chip>
          </Box>

          <Box sx={{ display: 'flex', gap: 2, justifyContent: 'space-between' }}>
            <SearchComponent
              placeholder="Поиск по названию или направлению"
              value={query}
              onChange={setQuery}
            />
            <Stack sx={{ flexDirection: 'row', spacing: '.5rem', justifyContent: 'end', gap: '.5rem' }}>
              <ExportWithTextButton
                onClick={() => exportSingleForm(taskId, task?.title ?? 'form')}
              />
              <PrimaryOutlinedButton
                variant="outlined"
                onClick={() => setModalStageOpen(true)}
              >
                <span>Этапы</span>
              </PrimaryOutlinedButton>

              <SettingStageModal
                isOpen={modalStageOpen}
                onClose={() => setModalStageOpen(false)}
                taskId={taskId}
                mode="task"
                formTypeCode={task?.form_type_code || ''}
                sheets={tables}
              />

            </Stack>
          </Box>

          <TablesList
            query={query}
            projects={projects}
            filteredTables={filteredTables}
            basePath="/table"
            formInfo={task}
          />
        </Box>
      </Box>
    </>
  );
}