/* import { useEffect, useState, useCallback } from "react";
import { useFetcher } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  Tabs,
  Button,
  BlockStack,
  InlineStack,
  Text,
  Badge,
  Link,
} from "@shopify/polaris";
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);

  return null;
};

export const action = async ({ request }) => {
  const { admin } = await authenticate.admin(request);

  return null;
};

export default function Index() {
  const fetcher = useFetcher();
  const shopify = useAppBridge();
  const isLoading =
    ["loading", "submitting"].includes(fetcher.state) &&
    fetcher.formMethod === "POST";
  const productId = fetcher.data?.product?.id.replace(
    "gid://shopify/Product/",
    "",
  );

  function TabsInsideOfACardExample() {
  const [selected, setSelected] = useState(0);

  const handleTabChange = useCallback(
    (selectedTabIndex) => setSelected(selectedTabIndex),
    [],
  );

  const tabs = [
    { id: "settings", content: "⚙️ Settings" },
    { id: "brands", content: "🏷️ Brands" },
    { id: "manage", content: "📦 Manage Brands" },
    { id: "help", content: "🆘 Help" },
    { id: "login", content: "🔐 Login" },
  ];

  return (
    <LegacyCard>
      <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange}>
        <LegacyCard.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
        </LegacyCard.Section>
      </Tabs>
    </LegacyCard>
  );
}

  useEffect(() => {
    if (productId) {
      shopify.toast.show("Product created");
    }
  }, [productId, shopify]);
  const generateProduct = () => fetcher.submit({}, { method: "POST" });

  return (
    <Page>
      <TitleBar
        title="Data4Autos Turn 14 Integration"
      />

      <BlockStack gap="500">
       <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="500">
                <BlockStack gap="200">
                  <InlineStack gap="300">
                    <Link url="/app/settings" removeUnderline>
                      <Button>Go to Settings Page</Button>
                    </Link>
                  </InlineStack>
                  <InlineStack gap="300">
                    <Link url="/app/brands" removeUnderline>
                      <Button>Go to Brands Page</Button>
                    </Link>
                  </InlineStack>
                  <InlineStack gap="300">
                    <Link url="/app/managebrand" removeUnderline>
                      <Button>Go to Brands Manage Page</Button>
                    </Link>
                  </InlineStack>
                </BlockStack>
              </BlockStack>
            </Card>
          </Layout.Section>
        </Layout> 
       </BlockStack>
    </Page>
  );
}

 */

/* //woking code
import { useEffect, useState, useCallback } from "react";
import { useFetcher } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  Tabs,
  Button,
  BlockStack,
  InlineStack,
  Text,
  Badge,
  Link,
  LegacyCard,
} from "@shopify/polaris";
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);
  return null;
};

export const action = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  return null;
};

export default function Index() {
  const fetcher = useFetcher();
  const shopify = useAppBridge();
  const isLoading =
    ["loading", "submitting"].includes(fetcher.state) &&
    fetcher.formMethod === "POST";
  const productId = fetcher.data?.product?.id?.replace(
    "gid://shopify/Product/",
    ""
  );

  useEffect(() => {
    // Temporarily disabling toast to avoid crash
    // You can safely add App Bridge toast later
  }, [productId, shopify]);

  const generateProduct = () => fetcher.submit({}, { method: "POST" });

  // Tabs logic
  const [selectedTab, setSelectedTab] = useState(0);
  const handleTabChange = useCallback(
    (selectedTabIndex) => setSelectedTab(selectedTabIndex),
    []
  );

  const tabs = [
    {
      id: "settings-tab",
      content: "⚙️ Settings",
      panelID: "settings-content",
    },
    {
      id: "brands-tab",
      content: "🏷️ Brands",
      panelID: "brands-content",
    },
    {
      id: "manage-tab",
      content: "📦 Manage Brands",
      panelID: "manage-content",
    },
    {
      id: "help-tab",
      content: "🆘 Help",
      panelID: "help-content",
    },
    {
      id: "login-tab",
      content: "🔐 Login",
      panelID: "login-content",
    },
  ];

  return (
    <Page>
      <TitleBar title="Data4Autos Turn 14 Integration" />
      <Layout>
        <Layout.Section>
          <Card>
            <Tabs tabs={tabs} selected={selectedTab} onSelect={handleTabChange}>
              <LegacyCard.Section title={tabs[selectedTab].content}>
                {selectedTab === 0 && (
                  <BlockStack gap="200">
                    <Text>Configure Turn14 integration settings.</Text>
                    <Link url="/app/settings">
                      <Button>Go to Settings Page</Button>
                    </Link>
                  </BlockStack>
                )}
                {selectedTab === 1 && (
                  <BlockStack gap="200">
                    <Text>View available brands from Turn14.</Text>
                    <Link url="/app/brands">
                      <Button>Go to Brands Page</Button>
                    </Link>
                  </BlockStack>
                )}
                {selectedTab === 2 && (
                  <BlockStack gap="200">
                    <Text>Manage your synced brand collections.</Text>
                    <Link url="/app/managebrand">
                      <Button>Go to Manage Brands</Button>
                    </Link>
                  </BlockStack>
                )}
                {selectedTab === 3 && (
                  <BlockStack gap="200">
                    <Text>Help and documentation links.</Text>
                    <Button url="https://data4autos.com/help" external>
                      Open Help Docs
                    </Button>
                    <Button url="mailto:support@data4autos.com" tone="critical">
                      Contact Support
                    </Button>
                  </BlockStack>
                )}
                {selectedTab === 4 && (
                  <BlockStack gap="200">
                    <Text>Login to manage Turn14 credentials.</Text>
                    <Link url="/app/login">
                      <Button>Go to Login</Button>
                    </Link>
                  </BlockStack>
                )}
              </LegacyCard.Section>
            </Tabs>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
} */


/* import { Page, Layout, Card, Text, BlockStack } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);
  return null;
};

export default function Index() {
  return (
    <Page>
      <TitleBar title="Data4Autos Turn14 Integration" />
      <Layout>
        <Layout.Section>
          <Card>
            <BlockStack gap="200">
              <Text variant="headingLg" as="h2">
                Welcome to your Turn14 integration dashboard!
              </Text>
              <Text>
                Use the navigation in the left sidebar to manage settings, view brands,
                sync collections, and more.
              </Text>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}
 */


import {
  Page,
  Layout,
  Card,
  BlockStack,
  Text,
  Badge,
  InlineStack,
  Image,
  Divider,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import data4autosLogo from "../assets/data4autos_logo.png"; // make sure this exists

export default function Index() {
  return (
    <Page>
      <TitleBar title="Data4Autos Turn14 Integration" />
      <Layout>
        <Layout.Section>
          <Card padding="500">
            <BlockStack gap="400">
              <InlineStack gap="200" align="center">
                <Image
                  source={data4autosLogo}
                  alt="Data4Autos Logo"
                  width={120}
                />
                <Text variant="headingLg" as="h1">
                  Welcome to your Turn14 Dashboard
                </Text>
              </InlineStack>

              <Divider />

              <BlockStack gap="200">
                <Text variant="bodyMd">
                  🚀 <b>Data4Autos Turn14 Integration</b> gives you the power to sync
                  product brands, manage collections, and automate catalog setup directly from
                  Turn14 to your Shopify store.
                </Text>

                <Text variant="bodyMd">
                  🔧 Use the left sidebar to:
                </Text>
                <BlockStack gap="100">
                  <Text as="span">⚙️ Manage API settings</Text>
                  <Text as="span">🏷️ Browse and import available brands</Text>
                  <Text as="span">📦 Sync brand collections to Shopify</Text>
                  <Text as="span">🔐 Handle secure Turn14 login credentials</Text>
                </BlockStack>

                <Divider />

                <InlineStack align="center">
                  <Badge tone="success">Status: Connected</Badge>
                  <Text tone="subdued">Shopify x Turn14</Text>
                </InlineStack>

                <Text tone="subdued" alignment="center">
                  Need help? Contact us at{" "}
                  <a href="mailto:support@data4autos.com">support@data4autos.com</a>
                </Text>
              </BlockStack>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}




/* import { useEffect, useState, useCallback } from "react";
import { useFetcher, useNavigate } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  Tabs,
  LegacyCard,
} from "@shopify/polaris";
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);
  return null;
};

export const action = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  return null;
};

export default function Index() {
  const fetcher = useFetcher();
  const shopify = useAppBridge();
  const navigate = useNavigate();

  const productId = fetcher.data?.product?.id?.replace(
    "gid://shopify/Product/",
    ""
  );

  useEffect(() => {
    // You can add toast messages here if needed
  }, [productId, shopify]);

  const tabs = [
    {
      id: "settings-tab",
      content: "⚙️ Settings",
      panelID: "settings-content",
      to: "/app/settings",
    },
    {
      id: "brands-tab",
      content: "🏷️ Brands",
      panelID: "brands-content",
      to: "/app/brands",
    },
    {
      id: "manage-tab",
      content: "📦 Manage Brands",
      panelID: "manage-content",
      to: "/app/managebrand",
    },
    {
      id: "help-tab",
      content: "🆘 Help",
      panelID: "help-content",
      to: "/app/help",
    },
    {
      id: "login-tab",
      content: "🔐 Login",
      panelID: "login-content",
      to: "/app/login",
    },
  ];

  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = useCallback(
    (selectedTabIndex) => {
      setSelectedTab(selectedTabIndex);
      navigate(tabs[selectedTabIndex].to);
    },
    [navigate]
  );

  return (
    <Page>
      <TitleBar title="Data4Autos Turn 14 Integration" />
      <Layout>
        <Layout.Section>
          <Card>
            <Tabs tabs={tabs} selected={selectedTab} onSelect={handleTabChange}>
              <LegacyCard.Section title={tabs[selectedTab].content}>
                <p>Redirecting to {tabs[selectedTab].content}...</p>
              </LegacyCard.Section>
            </Tabs>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

 */





/* import { useEffect, useState, useCallback } from "react";
import { useFetcher } from "@remix-run/react";
import {
  Page,
  Layout,
  Card,
  Tabs,
  Button,
  BlockStack,
  InlineStack,
  Text,
  Badge,
  Link,
  LegacyCard,
} from "@shopify/polaris";
import { TitleBar, useAppBridge } from "@shopify/app-bridge-react";
import { authenticate } from "../shopify.server";
import SettingsPage from "./app.settings"; // Adjust the path if needed

export const loader = async ({ request }) => {
  await authenticate.admin(request);
  return null;
};

export const action = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  return null;
};

export default function Index() {
  const fetcher = useFetcher();
  const shopify = useAppBridge();
  const isLoading =
    ["loading", "submitting"].includes(fetcher.state) &&
    fetcher.formMethod === "POST";
  const productId = fetcher.data?.product?.id?.replace(
    "gid://shopify/Product/",
    ""
  );

  useEffect(() => {
    // Toast placeholder (disabled)
  }, [productId, shopify]);

  const generateProduct = () => fetcher.submit({}, { method: "POST" });

  const [selectedTab, setSelectedTab] = useState(0);
  const handleTabChange = useCallback(
    (selectedTabIndex) => setSelectedTab(selectedTabIndex),
    []
  );

  const tabs = [
    {
      id: "settings-tab",
      content: "⚙️ Settings",
      panelID: "settings-content",
    },
    {
      id: "brands-tab",
      content: "🏷️ Brands",
      panelID: "brands-content",
    },
    {
      id: "manage-tab",
      content: "📦 Manage Brands",
      panelID: "manage-content",
    },
    {
      id: "help-tab",
      content: "🆘 Help",
      panelID: "help-content",
    },
    {
      id: "login-tab",
      content: "🔐 Login",
      panelID: "login-content",
    },
  ];

  return (
    <Page>
      <TitleBar title="Data4Autos Turn 14 Integration" />

      <Layout>
        <Layout.Section>
          <Card>
            <Tabs tabs={tabs} selected={selectedTab} onSelect={handleTabChange}>
              <LegacyCard.Section title={tabs[selectedTab].content}>
                {selectedTab === 0 && (
                  <SettingsPage standalone={false} />
                )}

                {selectedTab === 1 && (
                  <BlockStack gap="200">
                    <Text>View available brands from Turn14.</Text>
                    <Link url="/app/brands">
                      <Button>Go to Brands Page</Button>
                    </Link>
                  </BlockStack>
                )}

                {selectedTab === 2 && (
                  <BlockStack gap="200">
                    <Text>Manage your synced brand collections.</Text>
                    <Link url="/app/managebrand">
                      <Button>Go to Manage Brands</Button>
                    </Link>
                  </BlockStack>
                )}

                {selectedTab === 3 && (
                  <BlockStack gap="200">
                    <Text>Help and documentation links.</Text>
                    <Button url="https://data4autos.com/help" external>
                      Open Help Docs
                    </Button>
                    <Button url="mailto:support@data4autos.com" tone="critical">
                      Contact Support
                    </Button>
                  </BlockStack>
                )}

                {selectedTab === 4 && (
                  <BlockStack gap="200">
                    <Text>Login to manage Turn14 credentials.</Text>
                    <Link url="/app/login">
                      <Button>Go to Login</Button>
                    </Link>
                  </BlockStack>
                )}
              </LegacyCard.Section>
            </Tabs>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}
 */