import LlmPanel from "@/components/tabs/llmPanel";
import TextImagePanel from "@/components/tabs/textImagePanel";
import TextVideoPanel from "@/components/tabs/textVideoPanel";
import {
  Box,
  Flex,
  VStack,
  Text,
  Tabs,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  HStack,
} from "@chakra-ui/react";
import {
  IoDocumentTextOutline,
  IoImageOutline,
  IoVideocamOutline,
} from "react-icons/io5";
import { IoIosGitMerge } from "react-icons/io";
import {
  NumberParam,
  StringParam,
  useQueryParams,
  withDefault,
} from "use-query-params";
import { AiOutlinePoweroff } from "react-icons/ai";
import keycloak from "@/lib/keycloak";
import AppHeader from "@/components/layout/AppHeader";
import SidebarList from "@/components/layout/SidebarList";
import { useEffect } from "react";

export default function Home() {
  const [filters, setFilters] = useQueryParams({
    tab: withDefault(NumberParam, 0),
    tab_menu: withDefault(StringParam, "gemma_base"),
    model_name: withDefault(NumberParam, 0),
  });

  useEffect(() => {
    if (filters?.tab == 0) setFilters({ tab_menu: "gemma_base" });
    else if (filters?.tab == 1) setFilters({ tab_menu: "sdxl" });
    else if (filters?.tab == 2) setFilters({ tab_menu: "cogvideo_base" });
  }, [filters?.tab]);

  return (
    <Flex direction={"column"} minH="100vh" bg="gray.50" dir="rtl">
      {/* Header */}
      <AppHeader />

      {/* Page Layout */}
      <Flex flex="1" minH={0} mt={"92px"}>
        {/* Sidebar */}
        <Box
          w="280px"
          bg="#fdfbff"
          borderLeft="1px solid"
          borderColor="gray.200"
          py={8}
          position={"relative"}
        >
          <VStack
            align="stretch"
            spacing={6}
            overflowY={"auto"}
            maxH={"calc(100vh - 150px)"}
            sx={{
              "::-webkit-scrollbar": { display: "none" },
              "scrollbar-width": "none",
              "-ms-overflow-style": "none",
            }}
          >
            {/* Menu */}
            <Tabs
              isFitted
              variant="soft-rounded"
              colorScheme="green"
              px={6}
              onChange={(e) => setFilters({ model_name: e })}
              index={filters?.model_name}
            >
              <TabList mb={2}>
                <Tab>خانم ستاری</Tab>
                <Tab>رکن آبادی</Tab>
              </TabList>

              <TabPanels>
                <TabPanel>
                  <SidebarList filters={filters} setFilters={setFilters} />
                </TabPanel>
                <TabPanel>
                  <SidebarList filters={filters} setFilters={setFilters} />
                </TabPanel>
              </TabPanels>
            </Tabs>

            {/* Footer */}
          </VStack>

          <Box
            w={"full"}
            position={"absolute"}
            bottom={0}
            left={0}
            right={0}
            zIndex={10}
            borderTop={"1px"}
            borderColor={"gray.300"}
            bg={"gray.50"}
          >
            <HStack
              w={"full"}
              py={2}
              gap={2}
              justifyContent={"center"}
              alignItems={"center"}
              color={"gray.700"}
              cursor={"pointer"}
              transition={"all"}
              transitionDuration={"200"}
              _hover={{ color: "red.600" }}
              onClick={() => keycloak.logout()}
            >
              <AiOutlinePoweroff size={20} />
              <Text>خروج از حساب</Text>
            </HStack>
          </Box>
        </Box>

        {/* Content */}
        <Box
          flex="1"
          p={8}
          minW={0}
          overflowY={"auto"}
          maxH={"calc(100vh - 92px)"}
          sx={{
            "::-webkit-scrollbar": { display: "none" },
            "scrollbar-width": "none",
            "-ms-overflow-style": "none",
          }}
        >
          <Tabs
            variant="soft-rounded"
            colorScheme="purple"
            onChange={(e) => setFilters({ tab: e })}
            index={filters?.tab}
          >
            <TabList mb={6}>
              <Tab>
                <HStack>
                  <IoDocumentTextOutline fontSize={"20px"} />
                  <Text>پنل تولید متن</Text>
                </HStack>
              </Tab>
              <Tab>
                <HStack>
                  <IoImageOutline fontSize={"20px"} />
                  <Text>پنل تولید تصویر</Text>
                </HStack>
              </Tab>
              <Tab>
                <HStack>
                  <IoVideocamOutline fontSize={"20px"} />
                  <Text>پنل تولید ویدئو</Text>
                </HStack>
              </Tab>
              <Tab>
                <HStack>
                  <IoIosGitMerge fontSize={"20px"} />
                  <Text>مرج و تولید نهایی</Text>
                </HStack>
              </Tab>
            </TabList>

            <TabPanels>
              <TabPanel>
                <LlmPanel filters={filters} />
              </TabPanel>
              <TabPanel>
                <TextImagePanel />
              </TabPanel>
              <TabPanel>
                <TextVideoPanel />
              </TabPanel>
              <TabPanel>مرج نهایی</TabPanel>
            </TabPanels>
          </Tabs>
        </Box>
      </Flex>
    </Flex>
  );
}