/**
 * FAQ accordion — 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 → shadcn 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 type { Content } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { sanitizeHtml } from '@/core/lib/sanitize';
import { Link } from '@/core/lib/navigation';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { Button } from '@/components/ui/button';

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. Keep the page non-empty and
  // give the visitor a path to contact instead of a blank screen.
  if (!faq || items.length === 0) {
    return (
      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
          <br />
          {t('faqEmptyBody')}
        </p>
        <Button asChild>
          <Link href="/contact">{t('faqContactCta')}</Link>
        </Button>
      </section>
    );
  }

  return (
    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
      <Accordion
        type="single"
        collapsible
        defaultValue="faq-0"
        className="border-border rounded-lg border"
      >
        {items.map((item, idx) => (
          <AccordionItem
            key={idx}
            value={`faq-${idx}`}
            className="border-border last:border-b-0"
          >
            <AccordionTrigger className="hover:bg-muted/40 p-4 text-sm hover:no-underline sm:text-base">
              {item.question}
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed">
              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}