import { useEffect, useState, useCallback } from 'react';
import { createPortal } from 'react-dom';
import {
  TaskInfoContainer,
  NameTask,
} from '../../components/common/SwitchFormTask/SwitchFormTask.style';

import { BackButton } from '../../components/common/Buttons/BackButton';
import { Box, CircularProgress, Stack } from '@mui/material';
import { DictVspApi } from '../../api/dict-vsp';
import { toast } from 'react-toastify';
import TableDictVsp from './components/TableDictVsp';
import { PageContainer } from '../StyledForPage';
import { SspApi } from '../../api/ssp';
import { useAuth } from '../../app/context/AuthProvider';
import { ROLES_NAME_ID } from '../../constants/constants';
import DictVspFilters from './components/DictVspFilters';

const DictVspInfo = () => {
  const portalContent = (
    <TaskInfoContainer>
      <BackButton to="/dicts-navigator" />
      <NameTask>Справочник</NameTask>
    </TaskInfoContainer>
  );

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

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

function DictVspPage() {
  const [isLoading, setIsLoading] = useState(true);
  const [dictVspData, setDictVspData] = useState([]);
  const [ssps, setSsps] = useState([]);
  const [selectedSsp, setSelectedSsp] = useState(null);
  const { user } = useAuth();

  const loadData = useCallback(async () => {
    if (!user) return;
    setIsLoading(true);
    try {
      const isAdmin = user.role_id == ROLES_NAME_ID.admin;
      const [vspResponse, sspResponse] = await Promise.all([
        DictVspApi.get(),
        isAdmin ? SspApi.getAll() : Promise.resolve(null),
      ]);

      if (!vspResponse.success) {
        toast.error('Ошибка загрузки справочника');
        return;
      }
      setDictVspData(vspResponse.result || []);

      if (isAdmin) {
        if (!sspResponse.success) {
          toast.error('Ошибка загрузки списка ССП');
          return;
        }
        setSsps(sspResponse.result);
      } else {
        setSsps(user.org_units ?? []);
      }
    } catch (error) {
      console.error('Error loading data:', error);
      toast.error(error.response?.data?.message || 'Ошибка загрузки данных');
    } finally {
      setIsLoading(false);
    }
  }, [user]);

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

  const handleAdd = async (formData) => {
    try {
      const response = await DictVspApi.create(formData);
      if (response.success) {
        toast.success('ВСП успешно создан');
        setDictVspData((prev) => [...prev, response.result]);
      } else {
        toast.error(response.message || 'Ошибка создания ВСП');
      }
    } catch (error) {
      console.error('Error adding VSP:', error);
      toast.error(error.response?.data?.message || 'Ошибка создания ВСП');
      throw error;
    }
  };

  const handleEdit = async (formData) => {
    try {
      const response = await DictVspApi.update(formData.id, formData);
      if (response.success) {
        toast.success('ВСП успешно обновлен');
        setDictVspData((prev) => [
          ...prev.filter((v) => v.id !== formData.id),
          response.result,
        ]);
      } else {
        toast.error(response.message || 'Ошибка обновления ВСП');
      }
    } catch (error) {
      console.error('Error editing VSP:', error);
      toast.error(error.response?.data?.message || 'Ошибка обновления ВСП');
      throw error;
    }
  };

  const handleDelete = async (vspId) => {
    try {
      const response = await DictVspApi.delete(vspId);
      if (response.success) {
        toast.success('ВСП успешно удален');
        setDictVspData((prev) => [...prev.filter((v) => v.id !== vspId)]);
      } else {
        toast.error(response.message || 'Ошибка удаления ВСП');
      }
    } catch (error) {
      console.error('Error deleting VSP:', error);
      toast.error(error.response?.data?.message || 'Ошибка удаления ВСП');
      throw error;
    }
  };

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

  return (
    <>
      <DictVspInfo />
      {/* <HeaderSwitch /> */}
      <PageContainer>
        <Stack sx={{ alignItems: 'stretch' }} width="100%">
          <Box width="100%">
            {user.role_id !== ROLES_NAME_ID.executor_rf && (
              <DictVspFilters
                ssps={ssps}
                onSspChange={setSelectedSsp}
                selectedSsp={selectedSsp}
              />
            )}
            <TableDictVsp
              data={dictVspData}
              ssps={ssps}
              selectedSsp={selectedSsp}
              onAdd={handleAdd}
              onEdit={handleEdit}
              onDelete={handleDelete}
              loading={isLoading}
            />
          </Box>
        </Stack>
      </PageContainer>
    </>
  );
}

export default DictVspPage;