/**
 * Survey Widget (Live)
 * 
 * Collects user feedback with rating and optional text feedback.
 * Supports different rating scales (stars, numbers, thumbs, emojis).
 * Uses the shared Survey component for parity with preview.
 * 
 * @since 1.0.0
 * @updated 1.6.0 - Migrated to shared component
 */

import { Survey } from '@shared/components/widgets/Survey';
import type { GlobalValues, FieldValue } from '@/utils/resolveAppearance';
import type { ButtonStyleSettings } from '@/types';
import { t } from '@/lib/i18n';

interface SurveyWidgetProps {
  config: {
    title?: string;
    question: string;
    type?: 'stars' | 'numbers' | 'thumbs' | 'emojis';
    max_rating?: number;
    show_feedback?: boolean;
    feedback_placeholder?: string;
    submit_text?: string;
    success_message?: string;
    is_rtl?: boolean;
  };
  widgetSettings?: {
    container?: {
      background?: FieldValue;
      borderRadius?: FieldValue;
      borderWidth?: FieldValue;
      borderColor?: FieldValue;
      shadow?: FieldValue;
      padding?: FieldValue;
    };
    title?: {
      color?: FieldValue;
      typography?: Record<string, FieldValue>;
    };
    question?: {
      color?: FieldValue;
      font?: FieldValue;
      typography?: Record<string, FieldValue>;
    };
    stars?: {
      size?: FieldValue;
      gap?: FieldValue;
      filledColor?: FieldValue;
      emptyColor?: FieldValue;
      hoverColor?: FieldValue;
      strokeColor?: FieldValue;
      strokeWidth?: FieldValue;
      hoverScale?: string;
    };
    numbers?: {
      background?: FieldValue;
      color?: FieldValue;
      selectedBackground?: FieldValue;
      selectedColor?: FieldValue;
      borderRadius?: FieldValue;
    };
    emojis?: {
      size?: FieldValue;
      gap?: FieldValue;
      defaultColor?: FieldValue;
      selectedColor?: FieldValue;
      hoverScale?: string;
      selectedScale?: string;
      containerPadding?: FieldValue;
      containerBackground?: FieldValue;
      selectedBorderColor?: FieldValue;
    };
    feedback?: {
      background?: FieldValue;
      border?: FieldValue;
      color?: FieldValue;
      placeholderColor?: FieldValue;
      focusBorderColor?: FieldValue;
      borderRadius?: FieldValue;
      minHeight?: FieldValue;
      padding?: FieldValue;
      typography?: Record<string, FieldValue>;
    };
    submit?: {
      buttonStyle?: ButtonStyleSettings;
      background?: FieldValue;
      color?: FieldValue;
      borderRadius?: FieldValue;
      typography?: Record<string, FieldValue>;
    };
  };
  globalValues?: GlobalValues;
  language?: string;
  onSubmit: (data: { rating: number; feedback?: string }) => Promise<void>;
}

export function SurveyWidget({ config, widgetSettings, globalValues = {}, language, onSubmit }: SurveyWidgetProps) {
  const {
    title,
    question,
    type = 'stars',
    max_rating = 5,
    show_feedback = true,
    feedback_placeholder = t('Tell us more...'),
    submit_text = t('Send feedback'),
    success_message = t('Thank you for your feedback!'),
    is_rtl = true,
  } = config;

  return (
    <Survey
      globalValues={globalValues as any}
      widgetSettings={widgetSettings as any}
      context="live"
      isRTL={is_rtl}
      language={language}
      config={{
        title,
        question,
        type,
        max_rating,
        show_feedback,
        feedback_placeholder,
        submit_text,
        success_message,
      }}
      onSubmit={onSubmit}
    />
  );
}

export default SurveyWidget;
