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

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

export default function HelpPage() {
  const [openIndex, setOpenIndex] = useState(null);

  const toggle = useCallback((index) => {
    setOpenIndex((prev) => (prev === index ? null : index));
  }, []);

  const faqs = [
    {
      title: "📌 How do I connect my Turn14 account?",
      content:
        "Go to the Settings page, enter your Turn14 Client ID and Secret, then click 'Save & Connect'. A green badge will confirm successful connection.",
    },
    {
      title: "📦 Where can I import brands from?",
      content:
        "Use the 'Brands' tab in the left menu to view and import available brands from Turn14 into your Shopify store.",
    },
    {
      title: "🔄 How do I sync brand collections?",
      content:
        "In the 'Manage Brands' section, select the brands and hit 'Sync to Shopify'. A manual collection will be created or updated.",
    },
    {
      title: "🔐 Is my Turn14 API key secure?",
      content:
        "Yes. The credentials are stored using Shopify’s encrypted storage (metafields), ensuring they are safe and secure.",
    },
  ];

  return (
    <Page>
      <TitleBar title="Help & Documentation" />
      <Layout>
        <Layout.Section>
          <Card>
            <BlockStack gap="400">
              <Text variant="headingLg" as="h1">
                Need Help? You’re in the Right Place!
              </Text>
              <Text>
                This section covers frequently asked questions about the Data4Autos
                Turn14 integration app.
              </Text>

              {faqs.map((faq, index) => (
                <div key={index}>
                  <Button
                    onClick={() => toggle(index)}
                    fullWidth
                    disclosure={openIndex === index}
                    variant="plain"
                  >
                    {faq.title}
                  </Button>
                  <Collapsible open={openIndex === index}>
                    <Text as="p" tone="subdued" padding="200">
                      {faq.content}
                    </Text>
                  </Collapsible>
                </div>
              ))}

              <Text tone="subdued">
                Still have questions? Email us at{" "}
                <Link url="mailto:support@data4autos.com">
                  support@data4autos.com
                </Link>
              </Text>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}