'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { storefrontService } from '@/services/api/storefrontService';
import { parseFaqPageData } from '@/lib/faqPageLayout';
import { DEFAULT_FAQ_PAGE, type FaqCategory } from '@/lib/faqDefaults';

export function isFaqNavLink(label: string, url?: string): boolean {
  const text = String(label || '').toLowerCase();
  const path = String(url || '').split('?')[0];
  return text.includes('faq') || /^\/faqs?$/i.test(path) || /^\/faqs?\//i.test(path);
}

export function FaqMenu({ onNavigate }: { onNavigate?: () => void }) {
  const [categories, setCategories] = useState<FaqCategory[]>(
    DEFAULT_FAQ_PAGE.categories
  );

  useEffect(() => {
    let cancelled = false;
    storefrontService.getFaqLayout().then((raw) => {
      if (cancelled) return;
      const data = parseFaqPageData(raw);
      if (data.categories.length > 0) setCategories(data.categories);
    });
    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <div className="absolute left-0 top-full z-[130] w-[280px] pt-1">
      <div className="bg-white border border-gray-200 rounded-xl shadow-lg p-2">
        <Link
          href="/faqs"
          onClick={onNavigate}
          className="block rounded-lg px-3 py-2 text-[13px] font-semibold text-gray-700 hover:bg-primary/10 hover:text-primary"
        >
          All FAQs
        </Link>
        {categories.map((cat) => (
          <Link
            key={cat.slug}
            href={`/faqs/${cat.slug}`}
            onClick={onNavigate}
            className="block rounded-lg px-3 py-2 text-[13px] font-semibold text-gray-700 hover:bg-primary/10 hover:text-primary"
          >
            {cat.title}
          </Link>
        ))}
      </div>
    </div>
  );
}