import type { MetaFunction } from "react-router";
import { useState } from "react";
import { FAIcon } from "../components/FAIcon";

export const meta: MetaFunction = () => [
  { title: "Help Center – ShopPilot AI Chat Assistant" },
  { name: "description", content: "Get help with ShopPilot AI Chat Assistant. FAQs, setup guides, and support contact." },
];

const faqs = [
  {
    category: "Getting Started",
    iconName: "rocket",
    items: [
      {
        q: "How do I install ShopPilot AI on my Shopify store?",
        a: "Go to the Shopify App Store, search for 'ShopPilot AI', click Install, and approve the permissions. The chat widget will automatically appear on your storefront within seconds.",
      },
      {
        q: "Do I need any technical knowledge to set up the app?",
        a: "No. ShopPilot AI is designed to work out of the box. The AI is pre-trained on your product catalog automatically after installation. You can optionally customize colors, bot name, and welcome message from the app dashboard.",
      },
      {
        q: "How long does it take for my products to sync?",
        a: "Product catalog sync starts immediately after installation. Most stores sync within 1–5 minutes. Large catalogs (10,000+ products) may take up to 15 minutes. You can trigger a manual sync from Dashboard → Sync Catalog.",
      },
    ],
  },
  {
    category: "AI & Chat Settings",
    iconName: "robot",
    items: [
      {
        q: "Which AI providers does ShopPilot AI support?",
        a: "ShopPilot AI supports OpenAI (GPT-4o, GPT-4o-mini) and Google Gemini (Gemini 1.5 Pro, Gemini 1.5 Flash). You can switch providers from Dashboard → AI Settings.",
      },
      {
        q: "Can I use my own OpenAI or Gemini API key?",
        a: "Yes! Go to Dashboard → AI Settings → 'Use my own API key' and enter your key. Using your own key means AI usage is billed directly by OpenAI/Google and does not consume your ShopPilot AI credits.",
      },
      {
        q: "How do I customize the chatbot's personality and tone?",
        a: "Go to Dashboard → AI Settings → System Prompt. You can write custom instructions like 'Always respond in a friendly tone', 'Only recommend products under $50', or 'Always mention our free shipping policy'.",
      },
      {
        q: "Can the chatbot answer questions not related to my products?",
        a: "By default the bot focuses on products, orders, and your knowledge base. You can expand its scope using the System Prompt field or by adding FAQs to your Knowledge Base.",
      },
    ],
  },
  {
    category: "Widget Customization",
    iconName: "palette",
    items: [
      {
        q: "How do I change the chat widget colors?",
        a: "Go to Dashboard → Widget Settings → Colors. You can set the primary color, secondary color, text color, and bot message color to match your brand.",
      },
      {
        q: "Can I rename the chatbot?",
        a: "Yes. Go to Dashboard → Widget Settings → Bot Name. Enter any name you like (e.g. 'Sophie', 'Store Helper', 'Max').",
      },
      {
        q: "How do I move the chat widget position?",
        a: "Go to Dashboard → Widget Settings → Position. Choose from Bottom-Right, Bottom-Left, or Center.",
      },
      {
        q: "Can I hide the 'Powered by ShopPilot AI' badge?",
        a: "Yes, on Starter plan and above. Go to Dashboard → Widget Settings and toggle off 'Show Powered By'.",
      },
    ],
  },
  {
    category: "Knowledge Base",
    iconName: "book",
    items: [
      {
        q: "What is the Knowledge Base?",
        a: "The Knowledge Base lets you add custom FAQs, policies, and information that the AI will use to answer customer questions. Examples: return policy, shipping times, size guides, brand story.",
      },
      {
        q: "How do I add content to the Knowledge Base?",
        a: "Go to Dashboard → Knowledge Base → Add Item. Enter a title and the content. The AI will automatically use it when relevant questions are asked.",
      },
      {
        q: "Does ShopPilot AI sync my blog articles automatically?",
        a: "Yes. Blog articles from your Shopify store are automatically synced and available to the AI. You can see them under Dashboard → Knowledge Base → Store Articles.",
      },
    ],
  },
  {
    category: "Billing & Plans",
    iconName: "credit-card",
    items: [
      {
        q: "What happens if I exceed my monthly conversation limit?",
        a: "On the Free plan, the chatbot will pause until the next billing cycle. On paid plans, you can purchase credit top-ups from Dashboard → Billing, or upgrade to a higher plan.",
      },
      {
        q: "How do I upgrade or downgrade my plan?",
        a: "Go to Dashboard → Billing → View Plans. Select a plan and confirm. Upgrades take effect immediately. Downgrades take effect at the start of the next billing cycle.",
      },
      {
        q: "Is there a free trial?",
        a: "All new installs start on the Free plan with 100 conversations per month at no cost — no credit card required.",
      },
      {
        q: "Can I cancel anytime?",
        a: "Yes. Uninstalling the app from Shopify immediately cancels your subscription. There are no cancellation fees.",
      },
    ],
  },
  {
    category: "Troubleshooting",
    iconName: "wrench",
    items: [
      {
        q: "The chat widget is not showing on my storefront. What do I do?",
        a: "1) Make sure the chatbot is enabled: Dashboard → toggle 'Enable Chatbot' to ON. 2) Clear your browser cache. 3) Check that your theme is not blocking third-party scripts. 4) Contact support if the issue persists.",
      },
      {
        q: "The AI is giving wrong product recommendations. How do I fix this?",
        a: "Try triggering a manual catalog sync: Dashboard → Sync Catalog. If products were recently added or updated, they may not be indexed yet. Also check your System Prompt for any conflicting instructions.",
      },
      {
        q: "I'm getting an API key error. What's wrong?",
        a: "If using your own API key, verify it is valid and has sufficient credits in your OpenAI/Google account. If using ShopPilot AI's shared credits, check your balance under Dashboard → Billing.",
      },
    ],
  },
];

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

  const toggle = (key: string) => setOpenIndex(openIndex === key ? null : key);

  return (
    <div style={{ fontFamily: "Inter, system-ui, sans-serif", maxWidth: 860, margin: "0 auto", padding: "48px 24px", color: "#1f2937", lineHeight: 1.7 }}>

      {/* Header */}
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div style={{ width: 64, height: 64, background: "#4F46E5", borderRadius: 16, display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
          <FAIcon name="comments" style={{ fontSize: "28px", color: "#fff" }} />
        </div>
        <h1 style={{ margin: "0 0 8px", fontSize: 36, fontWeight: 700, color: "#111827" }}>Help Center</h1>
        <p style={{ margin: 0, color: "#6b7280", fontSize: 16 }}>Everything you need to know about ShopPilot AI Chat Assistant</p>
      </div>

      {/* Quick Contact Banner */}
      <div style={{ background: "#EEF2FF", border: "1px solid #C7D2FE", borderRadius: 12, padding: "20px 24px", marginBottom: 48, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <div>
          <p style={{ margin: "0 0 4px", fontWeight: 600, color: "#3730A3" }}>
            <FAIcon name="circle-question" style={{ marginRight: "8px", color: "#4F46E5" }} />
            Can't find your answer?
          </p>
          <p style={{ margin: 0, color: "#4338CA", fontSize: 14 }}>Our support team responds within 24 hours on business days.</p>
        </div>
        <a
          href="mailto:ashvin@digihorizon.in"
          style={{ background: "#4F46E5", color: "#fff", padding: "10px 20px", borderRadius: 8, textDecoration: "none", fontWeight: 600, fontSize: 14, whiteSpace: "nowrap", display: "inline-flex", alignItems: "center", gap: "8px" }}
        >
          <FAIcon name="envelope" /> Email Support
        </a>
      </div>

      {/* FAQ Sections */}
      {faqs.map((section) => (
        <div key={section.category} style={{ marginBottom: 40 }}>
          <h2 style={{ fontSize: 20, fontWeight: 700, color: "#111827", marginBottom: 16, display: "flex", alignItems: "center", gap: 10 }}>
            <FAIcon name={section.iconName} style={{ color: "#4F46E5" }} />
            {section.category}
          </h2>

          <div style={{ border: "1px solid #e5e7eb", borderRadius: 10, overflow: "hidden" }}>
            {section.items.map((item, idx) => {
              const key = `${section.category}-${idx}`;
              const isOpen = openIndex === key;
              return (
                <div key={key} style={{ borderBottom: idx < section.items.length - 1 ? "1px solid #e5e7eb" : "none" }}>
                  <button
                    onClick={() => toggle(key)}
                    style={{
                      width: "100%", textAlign: "left", padding: "16px 20px", background: isOpen ? "#f9fafb" : "#fff",
                      border: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
                    }}
                  >
                    <span style={{ fontWeight: 600, color: "#111827", fontSize: 15 }}>{item.q}</span>
                    <span style={{ color: "#4F46E5", fontSize: 14, flexShrink: 0 }}>
                      <FAIcon name={isOpen ? "minus" : "plus"} />
                    </span>
                  </button>
                  {isOpen && (
                    <div style={{ padding: "0 20px 16px", color: "#374151", fontSize: 15, background: "#f9fafb" }}>
                      {item.a}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      ))}

      {/* Contact Section */}
      <div style={{ marginTop: 56, background: "#f9fafb", border: "1px solid #e5e7eb", borderRadius: 12, padding: "32px 24px", textAlign: "center" }}>
        <h2 style={{ margin: "0 0 8px", fontSize: 22, fontWeight: 700, color: "#111827" }}>
          <FAIcon name="headset" style={{ marginRight: "10px", color: "#4F46E5" }} />
          Still need help?
        </h2>
        <p style={{ margin: "0 0 24px", color: "#6b7280" }}>Our team is happy to assist you with setup, customization, or any technical issues.</p>

        <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
          <a
            href="mailto:ashvin@digihorizon.in"
            style={{ background: "#4F46E5", color: "#fff", padding: "12px 24px", borderRadius: 8, textDecoration: "none", fontWeight: 600, display: "inline-flex", alignItems: "center", gap: "8px" }}
          >
            <FAIcon name="envelope" /> ashvin@digihorizon.in
          </a>
          <a
            href="https://www.digihorizon.in"
            target="_blank"
            rel="noopener noreferrer"
            style={{ background: "#fff", color: "#4F46E5", padding: "12px 24px", borderRadius: 8, textDecoration: "none", fontWeight: 600, border: "1px solid #C7D2FE", display: "inline-flex", alignItems: "center", gap: "8px" }}
          >
            <FAIcon name="globe" /> www.digihorizon.in
          </a>
        </div>
      </div>

      <hr style={{ border: "none", borderTop: "1px solid #e5e7eb", marginTop: 48, marginBottom: 24 }} />
      <p style={{ textAlign: "center", color: "#9ca3af", fontSize: 13 }}>
        © 2026 Digihorizon Technologies. All rights reserved. &nbsp;|&nbsp;
        <a href="/privacy" style={{ color: "#4F46E5" }}>
          <FAIcon name="shield-halved" style={{ marginRight: "4px" }} />
          Privacy Policy
        </a>
      </p>
    </div>
  );
}