/**
 * Menu → Feedback (drawer): suggestion feedback (moved from Micro-Action detail).
 * Hosts MicroActionSuggestionFeedbackForm + session pending bridge after POI select.
 *
 * Product law: keep the four-question MicroAction form, fields, chips, copy,
 * and MicroActionFormLogic → POST /api/micro-action/feedback.
 * Do not wire the generic Message/Category surface on this Menu route.
 *
 * UI: current SylvanFlow app chrome via SYLVAN_TECH_THEME (same scroll/title
 * tokens as Power Up / in-app surfaces). Navigation (approved): chrome header
 * Back in pages/app.js via sf_feedback_return_view — no second in-content Back.
 */
(function () {
  'use strict';

  const { useRef, useEffect } = React;

  function FeedbackInApp({ tabParams }) {
    const containerRef = useRef(null);
    const theme =
      typeof window !== 'undefined' && window.SYLVAN_TECH_THEME
        ? window.SYLVAN_TECH_THEME
        : null;

    useEffect(() => {
      theme?.ensureKeyframes?.();
    }, [theme]);

    const title =
      typeof window !== 'undefined' && window.SylvanFlowState?.getLanguage?.() === 'zh-CN'
        ? '反馈'
        : 'Feedback';

    const scrollCanvas =
      theme?.classes?.scrollCanvas || 'flex-1 overflow-y-auto bg-black min-h-0';
    const scrollInner =
      theme?.classes?.scrollInner ||
      'mx-auto w-full max-w-[440px] min-h-full pb-24 text-slate-100';
    const headline =
      theme?.classes?.headline ||
      'text-2xl sm:text-3xl font-bold text-white mb-2 tracking-tight';
    const sectionPad = theme?.layout?.sectionPad || 'px-4 pt-3';

    return (
      <div
        ref={containerRef}
        className={`h-full w-full ${scrollCanvas}`}
        data-sf-surface="feedback"
        data-sf-feedback-host="micro-action-suggestion"
      >
        <div className={`${scrollInner} ${sectionPad}`}>
          <h2 className={headline}>{title}</h2>
          {window.MicroActionSuggestionFeedbackForm ? (
            React.createElement(window.MicroActionSuggestionFeedbackForm, { tabParams })
          ) : (
            <p className="text-sm text-slate-400">Loading feedback form…</p>
          )}
        </div>
      </div>
    );
  }

  if (typeof window !== 'undefined') {
    window.FeedbackInApp = FeedbackInApp;
  }
})();