import { useCallback, useState, useEffect } from "react";
import { useNavigate, useLocation, Outlet, useNavigation } from "react-router";
import { Tabs, Text, Spinner } from "@shopify/polaris";
import Container from "app/components/ui/container";

export default function AIAssistantRoute() {
  const navigate = useNavigate();
  const navigation = useNavigation();
  const location = useLocation();
  const isLoading = navigation.state === "loading";

  // Define tab paths (flat routes)
  const tabPaths = ["/app/aiassistant", "/app/aiassistant/greetings", "/app/aiassistant/files"];

  // Determine selected tab from URL
  const currentTab = tabPaths.findIndex((path) => location.pathname === path);
  const [selected, setSelected] = useState(currentTab === -1 ? 0 : currentTab);

  // Update selected when URL changes
  useEffect(() => {
    setSelected(currentTab === -1 ? 0 : currentTab);
  }, [currentTab]);

  const handleTabChange = useCallback(
    (selectedIndex: number) => {
      setSelected(selectedIndex);
      navigate(tabPaths[selectedIndex]);
    },
    [navigate]
  );

  const tabs = [
    { id: "datasource-tab", content: "Datasource", panelID: "datasource-tab" },
    { id: "greetings-tab", content: "Greetings", panelID: "greetings-content" },
  ];

  return (
    <Container>
      {/* <Text variant="headingLg" as="h5">
        AI Assistant
      </Text> */}
      {/* <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
        {isLoading ? (
          <div style={{ display: "flex", justifyContent: "center", padding: "4rem" }}>
            <Spinner accessibilityLabel="Loading content" size="large" />{" "}
          </div>
        ) : (
          <Outlet />
        )}
      </Tabs> */}
      <Outlet />
    </Container>
  );
}