import { useState } from "react";
import type { MetaFunction } from "@remix-run/node";
import { useNavigate } from "@remix-run/react";
import { Button } from "~/components/ui/button";
import HeaderWithSupport from "~/components/HeaderWithSupport";
import { safeGoBack } from "~/utils/helpers";

export const meta: MetaFunction = () => {
  return [
    { title: "سوالات متداول - ویترون" },
    {
      name: "description",
      content: "پاسخ به سوالات متداول در مورد خدمات ویترون",
    },
  ];
};

interface FAQItem {
  id: number;
  question: string;
  answer: string;
}

const faqData: FAQItem[] = [
  {
    id: 1,
    question: "چگونه می‌توانم سفارش خود را پیگیری کنم؟",
    answer:
      "شما می‌توانید با ورود به حساب کاربری خود در بخش سفارشات، وضعیت سفارش خود را مشاهده کنید. همچنین کد پیگیری از طریق پیامک برای شما ارسال خواهد شد.",
  },
  {
    id: 2,
    question: "زمان تحویل سفارشات چقدر است؟",
    answer:
      "زمان تحویل بسته به موقعیت مکانی شما متفاوت است. معمولاً سفارشات در تهران 1 تا 3 روز کاری و در شهرستان‌ها 3 تا 7 روز کاری تحویل داده می‌شود.",
  },
  {
    id: 3,
    question: "آیا امکان بازگشت کالا وجود دارد؟",
    answer:
      "بله، شما می‌توانید تا 7 روز پس از دریافت کالا، در صورت عدم رضایت، درخواست بازگشت کالا را ثبت کنید. کالا باید در بسته‌بندی اصلی و بدون استفاده باشد.",
  },
  {
    id: 4,
    question: "روش‌های پرداخت چیست؟",
    answer:
      "شما می‌توانید از طریق درگاه پرداخت آنلاین، کارت به کارت یا پرداخت در محل (برای برخی مناطق) خرید خود را انجام دهید.",
  },
  {
    id: 5,
    question: "هزینه ارسال چگونه محاسبه می‌شود؟",
    answer:
      "هزینه ارسال بر اساس وزن، حجم و مقصد سفارش محاسبه می‌شود. برای خریدهای بالای 500 هزار تومان، ارسال رایگان است.",
  },
  {
    id: 6,
    question: "چگونه می‌توانم با پشتیبانی تماس بگیرم؟",
    answer:
      "شما می‌توانید از طریق شماره تلفن 021-12345678، ایمیل support@vitrown.com یا چت آنلاین در سایت با ما در ارتباط باشید.",
  },
  {
    id: 7,
    question: "آیا محصولات گارانتی دارند؟",
    answer:
      "بله، تمامی محصولات دارای گارانتی اصالت و سلامت فیزیکی هستند. برخی محصولات دارای گارانتی تعویض یا خدمات پس از فروش نیز می‌باشند.",
  },
  {
    id: 8,
    question: "چگونه می‌توانم کد تخفیف دریافت کنم؟",
    answer:
      "کدهای تخفیف از طریق پیامک، ایمیل و شبکه‌های اجتماعی ما اعلام می‌شود. همچنین با عضویت در خبرنامه می‌توانید از تخفیفات ویژه بهره‌مند شوید.",
  },
];

function AccordionItem({
  item,
  isOpen,
  onToggle,
}: {
  item: FAQItem;
  isOpen: boolean;
  onToggle: () => void;
}) {
  return (
    <div className="border-b border-gray-200 last:border-b-0">
      <button
        onClick={onToggle}
        className="w-full py-4 px-6 flex justify-between items-center text-right hover:bg-WHITE2 transition-colors duration-200"
      >
        <h3 className="text-base font-medium flex-1 text-right">
          {item.question}
        </h3>
        <svg
          className={`w-5 h-5 text-gray-500 transition-transform duration-300 ${
            isOpen ? "rotate-180" : ""
          }`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M19 9l-7 7-7-7"
          />
        </svg>
      </button>
      <div
        className={`overflow-hidden transition-all duration-300 ${
          isOpen ? "max-h-96" : "max-h-0"
        }`}
      >
        <div className="px-6 py-4 text-sm leading-relaxed">{item.answer}</div>
      </div>
    </div>
  );
}

export default function FAQ() {
  const navigate = useNavigate();
  const [openItems, setOpenItems] = useState<Set<number>>(new Set());
  const supportPhone = import.meta.env.VITE_SUPPORT_PHONE || "";
  const toggleItem = (id: number) => {
    setOpenItems((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(id)) {
        newSet.delete(id);
      } else {
        newSet.add(id);
      }
      return newSet;
    });
  };

  return (
    <div>
      <div className="lg:hidden">
        <HeaderWithSupport
          hideSupportButton={true}
          title="سوالات متداول"
          onBack={() => safeGoBack(navigate)}
        />
      </div>
      <div className="max-w-4xl mx-auto px-4 py-12">
        <div className="text-center mb-12">
          <h1 className="text-3xl font-bold mb-4">سوالات متداول</h1>
          <p className="text-lg">پاسخ سوالات رایج شما درباره خدمات ویترون</p>
        </div>

        <div className="rounded-lg shadow-sm">
          {faqData.map((item) => (
            <AccordionItem
              key={item.id}
              item={item}
              isOpen={openItems.has(item.id)}
              onToggle={() => toggleItem(item.id)}
            />
          ))}
        </div>

        <div className="mt-12 text-center rounded-lg p-8 bg-WHITE2">
          <h2 className="text-xl font-semibold mb-4">
            پاسخ سوال خود را پیدا نکردید؟
          </h2>
          <p className="mb-6">تیم پشتیبانی ما آماده پاسخگویی به سوالات شماست</p>
          <Button
            onClick={() => (window.location.href = `tel:${supportPhone}`)}
            size="lg"
            variant="dark"
            className="w-full"
          >
            تماس با پشتیبانی
          </Button>
        </div>
      </div>
    </div>
  );
}