import { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useNavigate } from 'react-router';
import { useSearchParams } from 'react-router-dom';

import { useDebounce } from '@material-hu/hooks/useDebounce';
import { IconLeaf, IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { colorPalette } from '@material-hu/theme/hugo/colors';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuTabs from '@material-hu/components/design-system/Tabs';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import {
  type Competency,
  type CompetencyCategory,
  type CompetencyProfile,
  type CreateCompetencyCategoryParams,
  type CreateCompetencyParams,
} from 'src/types/competencies';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { flatPages } from 'src/utils/tableUtils';

import CategoriesTabContent from './components/CategoriesTabContent';
import { useDeleteCategoryModal } from './components/CategoriesTabContent/CategoriesTable/DeleteCategoryModal';
import CompetenciesProfileTabContent from './components/CompetenciesProfileTabContent';
import { useDeleteCompetencyProfileModal } from './components/CompetenciesProfileTabContent/CompetenciesProfileTable/DeleteCompetencyProfileModal';
import CompetenciesTabContent from './components/CompetenciesTabContent';
import { useDeleteCompetencyModal } from './components/CompetenciesTabContent/CompetenciesTable/DeleteCompetencyModal';
import UpdateCategoryDrawer from './components/UpdateCategoryDrawer';
import UpdateCompetencyDrawer from './components/UpdateCompetencyDrawer';
import { COMPETENCIES_TABLE_PAGE_LIMIT } from './constants';
import {
  useCompetencyCategoriesForSelect,
  useCompetencyPageMutations,
  useCompetencyPageQueries,
} from './hooks';
import { competenciesRoutes } from './routes';
import { CompetencyTab } from './types';

const Competencies = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('competencies');
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const [selectedTab, setSelectedTab] = useState(CompetencyTab.COMPETENCIES);

  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [competencyToEdit, setCompetencyToEdit] = useState<Competency | null>(
    null,
  );
  const [isCategoryDrawerOpen, setIsCategoryDrawerOpen] = useState(false);
  const [categoryToEdit, setCategoryToEdit] =
    useState<CompetencyCategory | null>(null);
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search);
  const [categorySearch, setCategorySearch] = useState('');

  const paginationParams = {
    limit: COMPETENCIES_TABLE_PAGE_LIMIT,
    search: debouncedSearch,
  };

  const competencyTabs = [
    {
      label: t('competencies'),
      value: CompetencyTab.COMPETENCIES,
    },
    { label: t('competencies_profile'), value: CompetencyTab.PROFILES },
    { label: t('categories'), value: CompetencyTab.CATEGORIES },
  ];

  useEffect(() => {
    const tabParam = searchParams.get('tab');
    if (tabParam !== null) {
      const tab = tabParam as CompetencyTab;
      if (tab) {
        setSelectedTab(tab);
      }
    }
  }, [searchParams]);

  const handleCloseDrawer = () => {
    setIsDrawerOpen(false);
    setCompetencyToEdit(null);
    setCategorySearch('');
  };

  const handleCloseCategoryDrawer = () => {
    setIsCategoryDrawerOpen(false);
    setCategoryToEdit(null);
  };

  const {
    createCompetencyMutation,
    updateCompetencyMutation,
    deleteCompetencyMutation,
    deleteCompetencyProfileMutation,
    createCategoryMutation,
    updateCategoryMutation,
    deleteCategoryMutation,
  } = useCompetencyPageMutations({
    paginationParams,
    handleCloseDrawer,
    handleCloseCategoryDrawer,
  });

  const {
    competenciesQuery,
    competencyProfilesQuery,
    competencyCategoriesQuery,
  } = useCompetencyPageQueries({
    paginationParams,
    debouncedSearch,
    selectedTab,
  });

  const {
    categories: competencyCategories,
    isLoading: isLoadingCompetencyCategoryOptions,
  } = useCompetencyCategoriesForSelect(isDrawerOpen, categorySearch);

  const {
    data: competenciesQueryData,
    isLoading: isLoadingCompetencies,
    isFetchingNextPage: isFetchingNextPageCompetencies,
    fetchNextPage: fetchNextPageCompetencies,
  } = competenciesQuery;

  const {
    data: competencyProfilesQueryData,
    isLoading: isLoadingCompetencyProfiles,
    isFetchingNextPage: isFetchingNextPageCompetencyProfiles,
    fetchNextPage: fetchNextPageCompetencyProfiles,
  } = competencyProfilesQuery;

  const {
    data: competencyCategoriesQueryData,
    isLoading: isLoadingCompetencyCategories,
    isFetchingNextPage: isFetchingNextPageCompetencyCategories,
    fetchNextPage: fetchNextPageCompetencyCategories,
  } = competencyCategoriesQuery;

  const { deleteModal, showDeleteModal } = useDeleteCompetencyModal(
    deleteCompetencyMutation,
  );

  const {
    deleteModal: deleteProfileModal,
    showDeleteModal: showDeleteProfileModal,
  } = useDeleteCompetencyProfileModal(deleteCompetencyProfileMutation);

  const {
    deleteModal: deleteCategoryModal,
    showDeleteModal: showDeleteCategoryModal,
  } = useDeleteCategoryModal(deleteCategoryMutation);

  const handleTabChange = (value: CompetencyTab) => {
    setSearch('');
    setSelectedTab(value);
  };

  const handleCreateCompetency = () => {
    setCompetencyToEdit(null);
    setIsDrawerOpen(true);
  };

  const handleDeleteCompetency = (competencyId: number) => {
    showDeleteModal({ competencyId });
  };

  const handleEditCompetency = (competency: Competency) => {
    setCompetencyToEdit(competency);
    setIsDrawerOpen(true);
  };

  const handleSubmitCompetencyForm = (data: CreateCompetencyParams) => {
    if (competencyToEdit) {
      updateCompetencyMutation.mutateAsync({
        competencyId: competencyToEdit.id,
        updatedCompetency: data,
      });
    } else {
      createCompetencyMutation.mutateAsync(data);
    }
  };

  const handleCreateCompetencyProfile = () => {
    navigate(competenciesRoutes.createProfile('new'));
  };
  const handleDeleteCompetencyProfile = (competencyProfileId: number) => {
    showDeleteProfileModal({ competencyProfileId });
  };

  const handleEditCompetencyProfile = (
    competencyProfile: CompetencyProfile,
  ) => {
    navigate(competenciesRoutes.createProfile(competencyProfile.id.toString()));
  };

  const handleCreateCategory = () => {
    setCategoryToEdit(null);
    setIsCategoryDrawerOpen(true);
  };

  const handleDeleteCategory = (categoryId: number) => {
    showDeleteCategoryModal({ categoryId });
  };

  const handleEditCategory = (category: CompetencyCategory) => {
    setCategoryToEdit(category);
    setIsCategoryDrawerOpen(true);
  };

  const handleSubmitCategoryForm = (data: CreateCompetencyCategoryParams) => {
    if (categoryToEdit) {
      updateCategoryMutation.mutateAsync({
        categoryId: categoryToEdit.id,
        updatedCategory: data,
      });
    } else {
      createCategoryMutation.mutateAsync(data);
    }
  };

  const competencies = flatPages(competenciesQueryData) || [];

  const competencyProfiles = flatPages(competencyProfilesQueryData) || [];

  const categories = flatPages(competencyCategoriesQueryData) || [];

  const competenciesTableRowsCount =
    competenciesQueryData?.pages[0]?.data.count || 0;

  const competencyProfilesTableRowsCount =
    competencyProfilesQueryData?.pages[0]?.data.count || 0;

  const categoriesTableRowsCount =
    competencyCategoriesQueryData?.pages[0]?.data.count || 0;

  return (
    <HuGoThemeProvider>
      <Stack sx={{ height: '100%', flexDirection: 'column' }}>
        <Helmet>
          <title>{formatTitle(t('competencies'))}</title>
        </Helmet>
        <Stack
          sx={{
            backgroundColor: colorPalette.hugoBackground.neutralBg,
            flex: 1,
            py: 3,
            px: 3,
            gap: 2,
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
              <Stack
                sx={{
                  borderRadius: '50%',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: 40,
                  width: 40,
                  backgroundColor: colorPalette.hugoBackground.primaryBgLighter,
                  color: colorPalette.textColors.primaryText,
                }}
              >
                <IconLeaf />
              </Stack>
              <Typography
                variant="globalL"
                fontWeight="fontWeightSemiBold"
              >
                {t('competencies')}
              </Typography>
            </Stack>
            <Stack sx={{ flexDirection: 'row', gap: 2 }}>
              <Button
                variant="secondary"
                onClick={handleCreateCompetencyProfile}
              >
                {t('create_profile')}
              </Button>
              <Button
                variant="contained"
                onClick={handleCreateCompetency}
                startIcon={<IconPlus size={16} />}
              >
                {t('create_competency')}
              </Button>
            </Stack>
          </Stack>
          <HuTabs
            tabs={competencyTabs}
            value={selectedTab}
            defaultValue={CompetencyTab.COMPETENCIES}
            onTabChange={(value: string) =>
              handleTabChange(value as CompetencyTab)
            }
          />
          {selectedTab === CompetencyTab.COMPETENCIES && (
            <CompetenciesTabContent
              competencies={competencies}
              isFetchingNextPage={isFetchingNextPageCompetencies}
              tableRowsCount={competenciesTableRowsCount}
              isEmpty={!isLoadingCompetencies && competencies.length === 0}
              onSearchChange={setSearch}
              search={search}
              onLoadMore={fetchNextPageCompetencies}
              onCreateCompetency={handleCreateCompetency}
              onDeleteCompetency={handleDeleteCompetency}
              onEditCompetency={handleEditCompetency}
            />
          )}
          {selectedTab === CompetencyTab.PROFILES && (
            <CompetenciesProfileTabContent
              isEmpty={
                !isLoadingCompetencyProfiles && competencyProfiles.length === 0
              }
              competencyProfiles={competencyProfiles}
              onCreateCompetencyProfile={handleCreateCompetencyProfile}
              tableRowsCount={competencyProfilesTableRowsCount}
              isFetchingNextPage={isFetchingNextPageCompetencyProfiles}
              onLoadMore={fetchNextPageCompetencyProfiles}
              onDeleteCompetencyProfile={handleDeleteCompetencyProfile}
              onEditCompetencyProfile={handleEditCompetencyProfile}
              onSearchChange={setSearch}
              search={search}
            />
          )}
          {selectedTab === CompetencyTab.CATEGORIES && (
            <CategoriesTabContent
              categories={categories}
              isFetchingNextPage={isFetchingNextPageCompetencyCategories}
              tableRowsCount={categoriesTableRowsCount}
              isEmpty={
                !isLoadingCompetencyCategories && categories.length === 0
              }
              onSearchChange={setSearch}
              search={search}
              onLoadMore={fetchNextPageCompetencyCategories}
              onCreateCategory={handleCreateCategory}
              onDeleteCategory={handleDeleteCategory}
              onEditCategory={handleEditCategory}
            />
          )}
        </Stack>
      </Stack>
      {isDrawerOpen && (
        <UpdateCompetencyDrawer
          open={isDrawerOpen}
          onClose={handleCloseDrawer}
          onSubmit={handleSubmitCompetencyForm}
          isEdit={!!competencyToEdit}
          competencyToEdit={competencyToEdit}
          categories={competencyCategories}
          isLoadingCategories={isLoadingCompetencyCategoryOptions}
          onCategorySearchChange={setCategorySearch}
        />
      )}
      {isCategoryDrawerOpen && (
        <UpdateCategoryDrawer
          open={isCategoryDrawerOpen}
          onClose={handleCloseCategoryDrawer}
          onSubmit={handleSubmitCategoryForm}
          isEdit={!!categoryToEdit}
          categoryToEdit={categoryToEdit}
        />
      )}
      {deleteModal}
      {deleteProfileModal}
      {deleteCategoryModal}
    </HuGoThemeProvider>
  );
};

export default Competencies;