/**
 * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
 * configuration.
 *
 * The merchant configures FAQs in the Brainerce dashboard under
 *   Sell → Content → FAQ
 *
 * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
 * pre-fetched payload as `faq`; this component knows nothing about which
 * key it came from.
 *
 * Two render branches:
 *   1. `faq` has items → accordion of question/answer pairs
 *   2. `faq` is null OR has no items → friendly empty state with a contact
 *      CTA, so the /faq page never looks broken before the merchant seeds.
 *
 * Security: FAQ answers may contain merchant-authored HTML — we sanitize
 * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
 */
'use client';

import * as React from 'react';
import { Link } from '@/core/lib/navigation';
import type { Content } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { sanitizeHtml } from '@/core/lib/sanitize';

interface FaqSectionProps {
  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
  faq: Content<'FAQ'> | null;
}

export function FaqSection({ faq }: FaqSectionProps) {
  const t = useTranslations('content');

  const items = faq?.data?.items ?? [];
  const heading = faq?.name || t('faqTitle');

  // Empty state — runs when the merchant hasn't created a FAQ row yet,
  // or the row exists but contains no items.
  if (!faq || items.length === 0) {
    return (
      <section className="container-page py-16 lg:py-24">
        <div className="card mx-auto flex max-w-lg flex-col items-center gap-3 px-8 py-14 text-center">
          <h1 className="text-3xl">{heading}</h1>
          <p className="text-muted-foreground">
            <strong className="text-foreground mb-1 block font-semibold">
              {t('faqEmptyTitle')}
            </strong>
            {t('faqEmptyBody')}
          </p>
          <Link href="/contact" className="btn-primary btn-md mt-3">
            {t('faqContactCta')}
          </Link>
        </div>
      </section>
    );
  }

  return (
    <section className="container-page max-w-3xl py-14 lg:py-20">
      <h1 className="mb-8 text-center text-3xl sm:text-4xl">{heading}</h1>
      <ul className="space-y-3">
        {items.map((item, idx) => (
          <li key={idx}>
            <details open={idx === 0} className="card group overflow-hidden">
              <summary className="text-foreground hover:bg-secondary/60 flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-sans text-[15px] font-semibold transition-colors [&::-webkit-details-marker]:hidden">
                {item.question}
                <span
                  aria-hidden="true"
                  className="text-muted-foreground shrink-0 transition-transform duration-200 group-open:rotate-180"
                >
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.75"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="m6 9 6 6 6-6" />
                  </svg>
                </span>
              </summary>
              <div
                className="prose-store border-t px-5 py-4"
                dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
              />
            </details>
          </li>
        ))}
      </ul>
    </section>
  );
}