/**
 * Menu → Feedback (drawer): generic product feedback (message + category).
 * Uses pages/logic/feedbackFormLogic.js → POST /api/feedback (LEARNING_KV).
 *
 * Restored pre-#112 Menu surface. Suggestion-learning survey stays on the
 * Micro-Action path only (separate component; not hosted here).
 */
(function () {
  'use strict';

  const { useState, useEffect, useRef } = React;

  function FeedbackInApp() {
    const containerRef = useRef(null);
    const [feedbackData, setFeedbackData] = useState({
      message: '',
      category: null,
      rating: null
    });
    const [submitting, setSubmitting] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState(null);
    const [uiStrings, setUiStrings] = useState({
      feedback: 'Feedback',
      thankYou: '✅ Thank you for your feedback!',
      message: 'Message',
      shareThoughts: 'Share your thoughts...',
      category: 'Category',
      selectCategory: 'Select a category (optional)',
      bugReport: 'Bug Report',
      featureRequest: 'Feature Request',
      improvementSuggestion: 'Improvement Suggestion',
      other: 'Other',
      submitFeedback: 'Submit Feedback',
      submitting: 'Submitting...',
      pleaseProvideFeedback: 'Please provide feedback message or select a category',
      back: '← Back'
    });

    useEffect(() => {
      const loadUiStrings = async () => {
        let language = window.SylvanFlowState?.getLanguage?.();
        if (!language) {
          await new Promise((resolve) => setTimeout(resolve, 100));
          language = window.SylvanFlowState?.getLanguage?.() || 'en';
        }

        try {
          if (typeof window.getSysMessage === 'function') {
            const [
              feedback,
              thankYou,
              message,
              shareThoughts,
              category,
              selectCategory,
              bugReport,
              featureRequest,
              improvementSuggestion,
              other,
              submitFeedback,
              submittingLabel,
              pleaseProvideFeedback
            ] = await Promise.all([
              window.getSysMessage('ui:feedback', language),
              window.getSysMessage('ui:thank_you_feedback', language),
              window.getSysMessage('ui:message', language),
              window.getSysMessage('ui:share_thoughts', language),
              window.getSysMessage('ui:category', language),
              window.getSysMessage('ui:select_category_optional', language),
              window.getSysMessage('ui:bug_report', language),
              window.getSysMessage('ui:feature_request', language),
              window.getSysMessage('ui:improvement_suggestion', language),
              window.getSysMessage('ui:other', language),
              window.getSysMessage('ui:submit_feedback', language),
              window.getSysMessage('ui:submitting', language),
              window.getSysMessage('ui:please_provide_feedback', language)
            ]);

            setUiStrings({
              feedback: feedback || 'Feedback',
              thankYou: thankYou || '✅ Thank you for your feedback!',
              message: message || 'Message',
              shareThoughts: shareThoughts || 'Share your thoughts...',
              category: category || 'Category',
              selectCategory: selectCategory || 'Select a category (optional)',
              bugReport: bugReport || 'Bug Report',
              featureRequest: featureRequest || 'Feature Request',
              improvementSuggestion: improvementSuggestion || 'Improvement Suggestion',
              other: other || 'Other',
              submitFeedback: submitFeedback || 'Submit Feedback',
              submitting: submittingLabel || 'Submitting...',
              pleaseProvideFeedback:
                pleaseProvideFeedback || 'Please provide feedback message or select a category',
              back: language === 'zh-CN' || language === 'zh' ? '← 返回' : '← Back'
            });
          }
        } catch (err) {
          if (window.uiLogger) {
            window.uiLogger.uiWarn('[FEEDBACK] Error loading UI strings:', err.message || err);
          }
        }
      };

      loadUiStrings();

      const handleLanguageChange = () => loadUiStrings();
      if (window.SylvanFlowState?.on) {
        window.SylvanFlowState.on('language', handleLanguageChange);
        return () => window.SylvanFlowState.off('language', handleLanguageChange);
      }
      return undefined;
    }, []);

    const goBack = () => {
      let target = 'power-up';
      try {
        const saved = sessionStorage.getItem('sf_feedback_return_view');
        if (saved && saved !== 'feedback') target = saved;
      } catch (_) {}
      if (typeof window.appState?.set === 'function') {
        window.appState.set({ view: target });
      }
    };

    const handleSubmit = async (e) => {
      e.preventDefault();

      if (!feedbackData.message && !feedbackData.category) {
        setError(uiStrings.pleaseProvideFeedback);
        return;
      }

      setSubmitting(true);
      setError(null);

      if (!window.FeedbackFormLogic) {
        setError('Feedback form logic not loaded');
        setSubmitting(false);
        return;
      }

      window.FeedbackFormLogic.submitFeedback(
        feedbackData,
        () => {
          setSubmitted(true);
          setSubmitting(false);
        },
        (errorMsg) => {
          setError(errorMsg);
          setSubmitting(false);
        }
      );
    };

    return (
      <div ref={containerRef} className="h-full w-full overflow-y-auto bg-white">
        <div className="mx-auto max-w-2xl p-4">
          <div className="mb-4 flex items-center gap-3">
            <button
              type="button"
              onClick={goBack}
              className="inline-flex min-h-[44px] items-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50"
            >
              {uiStrings.back}
            </button>
            <h2 className="text-2xl font-bold text-slate-800">{uiStrings.feedback}</h2>
          </div>

          {submitted ? (
            <div className="rounded-lg border border-green-200 bg-green-50 p-6 text-center">
              <p className="font-semibold text-green-800">{uiStrings.thankYou}</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="mb-2 block text-sm font-medium text-slate-800">
                  {uiStrings.message}
                </label>
                <textarea
                  value={feedbackData.message}
                  onChange={(e) => setFeedbackData({ ...feedbackData, message: e.target.value })}
                  className="w-full rounded-lg border border-slate-300 p-3 text-slate-800"
                  rows={4}
                  placeholder={uiStrings.shareThoughts}
                />
              </div>

              <div>
                <label className="mb-2 block text-sm font-medium text-slate-800">
                  {uiStrings.category}
                </label>
                <select
                  value={feedbackData.category || ''}
                  onChange={(e) =>
                    setFeedbackData({ ...feedbackData, category: e.target.value || null })
                  }
                  className="w-full rounded-lg border border-slate-300 p-3 text-slate-800"
                >
                  <option value="">{uiStrings.selectCategory}</option>
                  <option value="bug">{uiStrings.bugReport}</option>
                  <option value="feature">{uiStrings.featureRequest}</option>
                  <option value="improvement">{uiStrings.improvementSuggestion}</option>
                  <option value="other">{uiStrings.other}</option>
                </select>
              </div>

              {error ? (
                <div className="rounded-lg border border-red-200 bg-red-50 p-3">
                  <p className="text-sm text-red-800">{error}</p>
                </div>
              ) : null}

              <button
                type="submit"
                disabled={submitting}
                className="w-full rounded-lg bg-teal-600 px-4 py-2 text-white hover:bg-teal-700 disabled:cursor-not-allowed disabled:opacity-50"
              >
                {submitting ? uiStrings.submitting : uiStrings.submitFeedback}
              </button>
            </form>
          )}
        </div>
      </div>
    );
  }

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