/**
 * Help Tab Component
 * FAQ, support contact, resources
 */

"use client";

import Link from "next/link";
import type { Lang } from "@/lib/config";

interface HelpTabProps {
  lang: Lang;
}

export default function HelpTab({ lang }: HelpTabProps) {
  const isAr = lang === "ar";

  const faqs = [
    {
      q: isAr
        ? "كيف أربط WhatsApp بحسابي؟"
        : "How do I connect WhatsApp to my account?",
      a: isAr
        ? 'انتقل إلى علامة التبويب "التكاملات" وانقر على "ربط WhatsApp". اتبع التعليمات لربط رقم WhatsApp Business الخاص بك.'
        : 'Navigate to the "Integrations" tab and click "Connect WhatsApp". Follow the instructions to link your WhatsApp Business number.',
    },
    {
      q: isAr ? "كيف أقوم بترقية خطتي؟" : "How do I upgrade my plan?",
      a: isAr
        ? 'انتقل إلى علامة التبويب "الفوترة" واختر الخطة المطلوبة. سيتم حساب الرسوم المقسمة تلقائيًا.'
        : 'Go to the "Billing" tab and select your desired plan. Prorated charges are calculated automatically.',
    },
    {
      q: isAr ? "كيف أقوم بتصدير بياناتي؟" : "How do I export my data?",
      a: isAr
        ? 'انتقل إلى علامة التبويب "متقدم" وانقر على "تصدير البيانات". ستتلقى رابط تنزيل عبر البريد الإلكتروني.'
        : 'Go to the "Advanced" tab and click "Export Data". You will receive a download link via email.',
    },
    {
      q: isAr ? "هل يمكنني إلغاء اشتراكي؟" : "Can I cancel my subscription?",
      a: isAr
        ? 'نعم، يمكنك إلغاء اشتراكك في أي وقت من علامة التبويب "الفوترة". ستحتفظ بالوصول حتى نهاية فترة الفوترة.'
        : 'Yes, you can cancel anytime from the "Billing" tab. You will retain access until the end of your billing period.',
    },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold text-slate-900">
          {isAr ? "المساعدة والدعم" : "Help & Support"}
        </h2>
        <p className="text-sm text-slate-600 mt-1">
          {isAr
            ? "احصل على المساعدة والإجابات على أسئلتك"
            : "Get help and answers to your questions"}
        </p>
      </div>

      {/* Quick Help Links */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <Link
          href={`/${lang}/contact`}
          className="rounded-lg border-2 border-slate-200 p-4 hover:border-brand-green hover:bg-slate-50 transition-all text-center"
        >
          <div className="text-3xl mb-2">📧</div>
          <p className="text-sm font-medium text-slate-900">
            {isAr ? "اتصل بالدعم" : "Contact Support"}
          </p>
        </Link>

        <Link
          href={`/${lang}/resources`}
          className="rounded-lg border-2 border-slate-200 p-4 hover:border-brand-green hover:bg-slate-50 transition-all text-center"
        >
          <div className="text-3xl mb-2">📚</div>
          <p className="text-sm font-medium text-slate-900">
            {isAr ? "التوثيق" : "Documentation"}
          </p>
        </Link>

        <a
          href="https://wa.me/97412345678"
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-lg border-2 border-slate-200 p-4 hover:border-brand-green hover:bg-slate-50 transition-all text-center"
        >
          <div className="text-3xl mb-2">💬</div>
          <p className="text-sm font-medium text-slate-900">
            {isAr ? "واتساب" : "WhatsApp"}
          </p>
        </a>
      </div>

      {/* FAQ Section */}
      <div>
        <h3 className="text-base font-semibold text-slate-900 mb-4">
          {isAr ? "الأسئلة الشائعة" : "Frequently Asked Questions"}
        </h3>
        <div className="space-y-3">
          {faqs.map((faq, index) => (
            <details
              key={index}
              className="group rounded-lg border border-slate-200"
            >
              <summary className="flex cursor-pointer items-center justify-between p-4 font-medium text-slate-900 hover:bg-slate-50">
                <span className="text-sm">{faq.q}</span>
                <svg
                  className="h-5 w-5 flex-shrink-0 text-slate-400 transition-transform group-open:rotate-180"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </summary>
              <div className="px-4 pb-4 text-sm text-slate-600">{faq.a}</div>
            </details>
          ))}
        </div>
      </div>

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-slate-200">
        <button
          onClick={handleSave}
          disabled={
            saving ||
            JSON.stringify(preferences) === JSON.stringify(originalPreferences)
          }
          className="rounded-lg bg-brand-green px-6 py-2.5 text-sm font-semibold text-white hover:bg-brand-greenHover shadow-md transition-all disabled:opacity-50"
        >
          {saving
            ? isAr
              ? "جاري الحفظ..."
              : "Saving..."
            : isAr
              ? "حفظ التغييرات"
              : "Save Changes"}
        </button>
      </div>
    </div>
  );
}