// ─────────────────────────────────────────────────────────
// ChefVerse · FAQ component
//
// Two layouts:
//   • Desktop / tablet landscape — vertical tabs (categories) on the left, content on the right
//   • Mobile / tablet portrait   — compact category dropdown, content below
//
// Data flows in via the `faqs` prop (categories + items) — see faq-data.jsx.
// `embedded` prop controls page heading: false = render heading, true = embedded in app shell
// ─────────────────────────────────────────────────────────

function FAQPage({ locale, faqs, embedded }) {
  const [activeCat, setActiveCat] = React.useState(faqs ? faqs.categories[0].id : null);
  const [query, setQuery] = React.useState("");
  const [expanded, setExpanded] = React.useState(new Set());

  const tl = {
    en: {
      title: "Help & FAQs",
      sub: "Find answers fast. If you don't see what you need, your UFS rep is one tap away.",
      searchPlaceholder: "Search questions…",
      noResults: "No questions matched your search.",
      stillNeedHelp: "Still need help?",
      stillNeedHelpSub: "Your UFS chef-success rep is here for anything the FAQs don't cover.",
      contactRep: "Talk to your UFS rep",
      categories: "Categories",
      searchResultsFor: "Search results for",
      resultsCount: "results",
    },
    de: {
      title: "Hilfe & FAQs",
      sub: "Schnelle Antworten. Wenn du nicht findest, was du suchst, ist dein UFS-Kontakt nur einen Klick entfernt.",
      searchPlaceholder: "Fragen durchsuchen…",
      noResults: "Keine Fragen passen zu deiner Suche.",
      stillNeedHelp: "Brauchst du noch Hilfe?",
      stillNeedHelpSub: "Dein UFS Chef-Success-Kontakt hilft bei allem, was die FAQs nicht abdecken.",
      contactRep: "UFS-Kontakt anschreiben",
      categories: "Kategorien",
      searchResultsFor: "Suchergebnisse für",
      resultsCount: "Ergebnisse",
    },
    id: {
      title: "Bantuan & FAQ",
      sub: "Temukan jawaban dengan cepat. Jika tidak menemukan yang kamu butuhkan, kontak UFS kamu hanya satu ketukan.",
      searchPlaceholder: "Cari pertanyaan…",
      noResults: "Tidak ada pertanyaan yang cocok.",
      stillNeedHelp: "Masih butuh bantuan?",
      stillNeedHelpSub: "Kontak UFS chef-success kamu siap membantu untuk apa pun yang tidak tercakup FAQ.",
      contactRep: "Hubungi kontak UFS",
      categories: "Kategori",
      searchResultsFor: "Hasil pencarian untuk",
      resultsCount: "hasil",
    },
  }[locale] || {};

  if (!faqs) {
    return <div className="faq-page-loading">Loading…</div>;
  }

  const toggle = (id) => {
    const next = new Set(expanded);
    next.has(id) ? next.delete(id) : next.add(id);
    setExpanded(next);
  };

  const q = query.trim().toLowerCase();
  const allItems = faqs.categories.flatMap(cat =>
    cat.items.map(item => ({ ...item, catId: cat.id, catLabel: cat.label[locale] || cat.label.en }))
  );

  let visibleItems;
  if (q) {
    visibleItems = allItems.filter(item => {
      const ques = (item.question[locale] || item.question.en || "").toLowerCase();
      const ans = (item.answer[locale] || item.answer.en || "").toLowerCase();
      return ques.includes(q) || ans.includes(q);
    });
  } else {
    const cat = faqs.categories.find(c => c.id === activeCat);
    visibleItems = cat ? cat.items.map(item => ({ ...item, catId: cat.id, catLabel: cat.label[locale] || cat.label.en })) : [];
  }

  const handleContactRep = () => {
    const subject = encodeURIComponent("ChefVerse — question from a chef");
    window.location.href = `mailto:chef-success@unilever.com?subject=${subject}`;
  };

  const currentCat = faqs.categories.find(c => c.id === activeCat);

  return (
    <div className={"page faq-page " + (embedded ? "faq-page-embedded" : "faq-page-standalone")}>
      {/* Page heading — always shown, including in embedded (Help) mode */}
      <div className="faq-page-head">
        <h1>{tl.title}</h1>
        <p className="faq-page-sub">{tl.sub}</p>
      </div>

      {/* Search — full width above the layout */}
      <div className="faq-search-wrap">
        <Icon name="search" size={16} className="faq-search-ic" />
        <input
          className="faq-search"
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={tl.searchPlaceholder}
          aria-label={tl.searchPlaceholder}
        />
        {query && (
          <button className="faq-search-clear" onClick={() => setQuery("")} aria-label="Clear">
            <Icon name="x" size={14} />
          </button>
        )}
      </div>

      {/* Two-column layout: left tabs / right content (desktop) — stacks on mobile */}
      <div className={"faq-layout " + (q ? "faq-layout-search" : "")}>
        {/* LEFT: vertical tabs on desktop, compact dropdown on mobile */}
        {!q && (
          <>
            <aside className="faq-tabs">
              <div className="faq-tabs-label">{tl.categories}</div>
              {faqs.categories.map(cat => {
                const isOn = cat.id === activeCat;
                return (
                  <button
                    key={cat.id}
                    className={"faq-tab " + (isOn ? "on" : "")}
                    onClick={() => { setActiveCat(cat.id); setExpanded(new Set()); }}
                    type="button">
                    <Icon name={cat.icon || "circle"} size={16} className="faq-tab-icon" />
                    <span className="faq-tab-label">{cat.label[locale] || cat.label.en}</span>
                    <span className="faq-tab-count">{cat.items.length}</span>
                  </button>
                );
              })}
            </aside>

            {/* Mobile-only dropdown — replaces the tabs at ≤768px */}
            <div className="faq-mobile-cat">
              <UFSLocaleDropdown
                value={activeCat}
                onChange={(v) => { setActiveCat(v); setExpanded(new Set()); }}
                ariaLabel={tl.categories}
                fullWidth
                options={faqs.categories.map(cat => ({
                  value: cat.id,
                  label: (cat.label[locale] || cat.label.en) + "  (" + cat.items.length + ")",
                }))}
              />
            </div>
          </>
        )}

        {/* RIGHT: content area */}
        <div className="faq-content">
          {/* Section heading reflects the current category or search state */}
          {!q && currentCat && (
            <div className="faq-section-head">
              <h2 className="faq-section-title">
                <Icon name={currentCat.icon || "circle"} size={18} />
                {currentCat.label[locale] || currentCat.label.en}
              </h2>
            </div>
          )}
          {q && (
            <div className="faq-section-head">
              <h2 className="faq-section-title">
                {tl.searchResultsFor} "{query}"
              </h2>
              <span className="faq-section-meta">{visibleItems.length} {tl.resultsCount}</span>
            </div>
          )}

          <div className="faq-list">
            {visibleItems.length === 0 ? (
              <div className="faq-empty">
                <Icon name="search" size={20} />
                <p>{tl.noResults}</p>
              </div>
            ) : (
              visibleItems.map(item => {
                const isOpen = expanded.has(item.id);
                return (
                  <div key={item.id} className={"faq-item " + (isOpen ? "open" : "")}>
                    <button
                      className="faq-item-q"
                      onClick={() => toggle(item.id)}
                      aria-expanded={isOpen}>
                      <span className="faq-item-q-text">{item.question[locale] || item.question.en}</span>
                      <Icon name="chevron-down" size={16} className="faq-item-chevron" />
                    </button>
                    {isOpen && (
                      <div className="faq-item-a">
                        {(item.answer[locale] || item.answer.en).split("\n").map((para, i) => (
                          <p key={i}>{para}</p>
                        ))}
                        {q && (
                          <div className="faq-item-cat-pill">{item.catLabel}</div>
                        )}
                      </div>
                    )}
                  </div>
                );
              })
            )}
          </div>

          {/* Contact rep — always at the bottom of the content column */}
          <div className="faq-rep-card">
            <div className="faq-rep-card-l">
              <div className="faq-rep-card-icon">
                <Icon name="message-circle" size={20} />
              </div>
              <div>
                <div className="faq-rep-card-title">{tl.stillNeedHelp}</div>
                <div className="faq-rep-card-sub">{tl.stillNeedHelpSub}</div>
              </div>
            </div>
            <button className="btn btn-primary" onClick={handleContactRep}>
              {tl.contactRep} <Icon name="arrow-right" size={14} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.FAQPage = FAQPage;