'use client';

import React, { useState } from 'react';
import { sendFeedback } from '@/app/actions/emailAction';
import { useNotification } from '@/context/NotificationContext';
import { useEstablishment } from '@/context/EstablishmentContext';
import { useTranslations } from 'next-intl';
import WisiwigTextArea from '@/components/Form/WisiwigTextArea';
import InputText from '@/components/Form/InputText';
import Button from '@/components/Form/Button';
import SelectChoice from '@/components/Form/SelectChoice';
import logger from '@/utils/logger';

export default function FeedbackPage() {
  const t = useTranslations('feedback');
  const { showNotification } = useNotification();
  const { selectedEstablishmentId, establishments, user } = useEstablishment();

  // Récupérer les infos complètes de l'établissement sélectionné
  const selectedEstablishment = establishments?.find(
    (e) => e.id === selectedEstablishmentId
  );

  const [category, setCategory] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const categoryChoices = [
    { value: 'bug', label: t('category_bug') },
    { value: 'feature', label: t('category_feature') },
    { value: 'question', label: t('category_question') },
    { value: 'other', label: t('category_other') },
  ];

  const handleSubmit = async () => {
    if (!category || !subject || !message) {
      showNotification(t('error_required_fields'), 'error', t('error'));
      return;
    }

    setIsSubmitting(true);

    // Construire le nom de l'utilisateur (fallback vers l'email si nom indisponible)
    const userName = user
      ? user.first_name && user.last_name
        ? `${user.first_name} ${user.last_name}`
        : user.username || user.email?.split('@')[0] || ''
      : '';

    const feedbackData = {
      category,
      subject,
      message,
      establishment: selectedEstablishment
        ? {
            id: selectedEstablishment.id,
            name: selectedEstablishment.name,
            total_capacity: selectedEstablishment.total_capacity,
            evaluation_frequency: selectedEstablishment.evaluation_frequency,
          }
        : { id: selectedEstablishmentId },
      user_email: user?.email || '',
      user_name: userName,
    };

    try {
      await sendFeedback(feedbackData);
      showNotification(t('success_message'), 'success', t('success'));
      // Réinitialiser les champs après succès
      setCategory('');
      setSubject('');
      setMessage('');
    } catch (error) {
      logger.error("Erreur lors de l'envoi du feedback:", { error });
      showNotification(t('error_sending'), 'error', t('error'));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="h-full flex flex-col p-4">
      <div className="max-w-3xl mx-auto w-full">
        <h1 className="font-headline text-2xl font-bold text-gray-800 mb-2">
          {t('title')}
        </h1>
        <p className="text-gray-600 mb-6">{t('description')}</p>

        <div className="bg-white rounded-md shadow-sm border border-gray-200 p-6">
          {/* Catégorie */}
          <SelectChoice
            name="category"
            label={t('category_label')}
            selected={category}
            callback={(e) => setCategory(e.target.value)}
            choices={categoryChoices}
            placeHolder={t('category_placeholder')}
            required
          />

          {/* Sujet */}
          <InputText
            name="subject"
            label={t('subject_label')}
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            placeholder={t('subject_placeholder')}
            required
            className="mb-4 mt-4"
          />

          {/* Message */}
          <div className="mb-6">
            <WisiwigTextArea
              label={t('message_label')}
              value={message}
              onChange={setMessage}
              placeholder={t('message_placeholder')}
              required
            />
          </div>

          {/* Bouton d'envoi */}
          <div className="flex justify-end">
            <Button
              text={isSubmitting ? t('sending') : t('send')}
              onClick={handleSubmit}
              disabled={isSubmitting}
            />
          </div>
        </div>
      </div>
    </div>
  );
}