"use client";

import React, { useState } from "react";
import { FaqComponentProps } from "@/types/faqTypes";

export const FaqComponent: React.FC<FaqComponentProps> = ({ faqs, className = "" }) => {
  const [activeFaq, setActiveFaq] = useState<string | null>(null);
  const [mobileOpenFaq, setMobileOpenFaq] = useState<string | null>(null);

  const handleFaqClick = (faqId: string) => {
    // Desktop behavior: just set active
    setActiveFaq(faqId);
    
    // Mobile behavior: toggle open/close
    setMobileOpenFaq(mobileOpenFaq === faqId ? null : faqId);
  };

  const PlaceholderContent = () => (
    <div className="flex flex-col items-center justify-center h-full min-h-[300px] text-center p-8">
      <div className="mb-4">
        <svg
          className="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </div>
      <h3 className="text-lg font-medium text-gray-500 dark:text-gray-400 mb-2">
        Select a question
      </h3>
      <p className="text-sm text-gray-400 dark:text-gray-500">
        Choose a question from the left to view its answer here
      </p>
    </div>
  );

  return (
    <div className={`w-full ${className}`}>
      {/* Mobile Layout - Accordion Style */}
      <div className="block lg:hidden space-y-3 max-h-[32rem] overflow-y-auto custom-scrollbar pr-1">
        {faqs.map((faq) => (
          <div
            key={faq.id}
            className={`overflow-hidden rounded-xl ${
              mobileOpenFaq === faq.id ? "bg-brand-50" : ""
            }`}
          >
            {/* Mobile Header */}
            <div
              onClick={() => handleFaqClick(faq.id)}
              className={`flex cursor-pointer items-center justify-between px-6 py-4 ${
                mobileOpenFaq === faq.id
                  ? "bg-brand-50 dark:bg-brand-100"
                  : "bg-gray-100 dark:bg-white/[0.03]"
              }`}
            >
              <h4
                className={`text-lg font-medium ${
                  mobileOpenFaq === faq.id
                    ? "text-gray-800"
                    : "text-gray-800 dark:text-white/90"
                }`}
              >
                {faq.title}
              </h4>

              <button
                className={`duration-200 ${
                  mobileOpenFaq === faq.id
                    ? "text-gray-800 dark:text-gray-800"
                    : "text-gray-500 dark:text-gray-400"
                }`}
              >
                {mobileOpenFaq === faq.id ? (
                  <svg
                    className="fill-current"
                    width="28"
                    height="28"
                    viewBox="0 0 28 28"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M7 12.9995C6.44772 12.9995 6 13.4472 6 13.9995C6 14.5518 6.44772 14.9995 7 14.9995V12.9995ZM21.0008 14.9995C21.5531 14.9995 22.0008 14.5518 22.0008 13.9995C22.0008 13.4472 21.5531 12.9995 21.0008 12.9995V14.9995ZM7 14.9995H21.0008V12.9995H7V14.9995Z" />
                  </svg>
                ) : (
                  <svg
                    className="fill-current"
                    width="28"
                    height="28"
                    viewBox="0 0 28 28"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M7 12.9998C6.44772 12.9998 6 13.4475 6 13.9998C6 14.5521 6.44772 14.9998 7 14.9998V12.9998ZM21.0008 14.9998C21.5531 14.9998 22.0008 14.5521 22.0008 13.9998C22.0008 13.4475 21.5531 12.9998 21.0008 12.9998V14.9998ZM15.0003 6.99951C15.0003 6.44723 14.5526 5.99951 14.0003 5.99951C13.448 5.99951 13.0003 6.44723 13.0003 6.99951H15.0003ZM13.0003 21.0003C13.0003 21.5526 13.448 22.0003 14.0003 22.0003C14.5526 22.0003 15.0003 21.5526 15.0003 21.0003H13.0003ZM7 14.9998H21.0008V12.9998H7V14.9998ZM13.0003 6.99951V21.0003H15.0003V6.99951H13.0003Z" />
                  </svg>
                )}
              </button>
            </div>

            {/* Mobile Content */}
            {mobileOpenFaq === faq.id && (
              <div className="p-6 border-t border-brand-100 dark:border-brand-200">
                <p className="text-base text-gray-800 dark:text-white/90">
                  {faq.content}
                </p>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Desktop Layout - Split View */}
      <div className="hidden lg:flex gap-8">
        {/* Left Side - Questions List */}
        <div className="w-1/2 space-y-3 max-h-[36rem] overflow-y-auto custom-scrollbar pr-1">
          {faqs.map((faq) => (
            <div
              key={faq.id}
              onClick={() => handleFaqClick(faq.id)}
              className={`cursor-pointer rounded-xl px-6 py-4 transition-all duration-200 ${
                activeFaq === faq.id
                  ? "bg-brand-50 dark:bg-brand-100 ring-2 ring-brand-200"
                  : "bg-gray-100 dark:bg-white/[0.03] hover:bg-gray-50 dark:hover:bg-white/[0.05]"
              }`}
            >
              <h4
                className={`text-lg font-medium ${
                  activeFaq === faq.id
                    ? "text-gray-800"
                    : "text-gray-800 dark:text-white/90"
                }`}
              >
                {faq.title}
              </h4>
            </div>
          ))}
        </div>

        {/* Right Side - Answer Display */}
        <div className="w-1/2">
          <div className="bg-gray-50 dark:bg-white/[0.02] rounded-xl min-h-[400px] max-h-[36rem] overflow-y-auto custom-scrollbar border border-gray-200 dark:border-white/[0.08]">
            {activeFaq ? (
              <div className="p-8">
                <h3 className="text-xl font-semibold text-gray-800 dark:text-white/90 mb-4">
                  {faqs.find(faq => faq.id === activeFaq)?.title}
                </h3>
                <p className="text-base text-gray-700 dark:text-white/80 leading-relaxed">
                  {faqs.find(faq => faq.id === activeFaq)?.content}
                </p>
              </div>
            ) : (
              <PlaceholderContent />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};