import { useState } from 'react';
import { FiAlertCircle, FiCamera, FiKey, FiUpload } from 'react-icons/fi';
import '../index.css';

const Avatar = () => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [screenshot, setScreenshot] = useState<File | null>(null);
  const [apiKey, setApiKey] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [show, setshow] = useState(false);

  const handleScreenshotChange = (e: any) => {
    if (e.target.files && e.target.files[0]) {
      setScreenshot(e.target.files[0]);
    }
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    e.stopPropagation()
    setIsSubmitting(true);

    try {
      const formData = new FormData();
      formData.append('title', title);
      formData.append('description', description);
      formData.append('apiKey', apiKey);

      // Ajouter les informations du navigateur
      const browserInfo = {
        userAgent: navigator.userAgent,
        platform: navigator.platform,
        language: navigator.language
      };
      formData.append('browserInfo', JSON.stringify(browserInfo));

      if (screenshot) {
        formData.append('screenshot', screenshot);
      }
      const response = await fetch('/api/reports', {
        method: 'POST',
        body: formData
      });
      if (!response.ok) {
        throw new Error('Erreur lors de la soumission du rapport');
      }
      // Réinitialiser le formulaire après soumission réussie
      setTitle('');
      setDescription('');
      setScreenshot(null);
      setshow(false)
      alert('Rapport de bug soumis avec succès!');
    } catch (error) {
      console.error(error);
      alert('Une erreur est survenue lors de la soumission du rapport');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <div
        onClick={function (e: any) {
          e.preventDefault();
          e.state()
          setshow(function (state) {
            return !state
          })
        }}
        className="space-y-1 p-3 rounded-xl shadow-2xl fixed z-50 cursor-pointer bg-white bottom-10 right-10 rounded-full"
      >
        <h2 className="text-md text-center font-bold text-gray-900 flex items-center justify-center">
          <FiAlertCircle className="mr-3 text-lg text-yellow-500 animate-pulse" />
          Signaler un bug
        </h2>
        <p className="text-xs text-center text-gray-500">Aidez-nous à améliorer notre plateforme</p>
      </div>
      {show &&
        <div
          onClick={function (e) {
            e.preventDefault();
            e.stopPropagation()
            setshow(false)
          }} className="w-full z-50 fixed bottom-0 right-10 flex items-center justify-end ">
          <form onSubmit={handleSubmit} className="max-w-2xl bg-white p-8 bg-white rounded-xl shadow-2xl transform transition-all duration-300 hover:shadow-3xl">
            <div className="space-y-1">
              <h2 className="text-3xl font-bold text-gray-900 flex items-center">
                <FiAlertCircle className="mr-3 text-yellow-500 animate-pulse" />
                Signaler un bug
              </h2>
              <p className="text-sm text-gray-500">Aidez-nous à améliorer notre plateforme</p>
            </div>
            {/* Titre */}
            <div className="space-y-2 mt-8">
              <div className="flex items-center justify-between">
                <label htmlFor="title" className="block text-sm font-medium text-gray-700">
                  Titre du bug
                </label>
                <span className="text-sm text-gray-500">{title.length}/100</span>
              </div>
              <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value.slice(0, 100))}
                required
                className="block w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                placeholder="Décrivez brièvement le problème"
              />
            </div>
            {/* Description */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label htmlFor="description" className="block text-sm font-medium text-gray-700">
                  Description détaillée
                </label>
                <span className="text-sm text-gray-500">{description.length}/500</span>
              </div>
              <textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value.slice(0, 500))}
                required
                rows={5}
                className="block w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                placeholder="Décrivez en détail ce qui s'est passé..."
              />
            </div>
            {/* Capture d'écran */}
            <div className="space-y-2">
              <label className="block text-sm font-medium text-gray-700">
                Capture d'écran (optionnel)
              </label>
              <div className="relative group">
                <label className="flex flex-col items-center justify-center p-8 border-2 border-dashed border-gray-200 rounded-lg hover:border-indigo-500 transition-all cursor-pointer">
                  {screenshot ? (
                    <>
                      <img
                        src={URL.createObjectURL(screenshot)}
                        alt="Preview"
                        className="w-32 h-32 object-cover rounded-md mb-4"
                      />
                      <span className="text-indigo-600 font-medium">{screenshot.name}</span>
                    </>
                  ) : (
                    <>
                      <FiCamera className="w-8 h-8 text-gray-400 group-hover:text-indigo-500 transition-all" />
                      <span className="mt-2 text-sm text-gray-500 group-hover:text-indigo-600 transition-all">
                        Glissez-déposez ou cliquez pour ajouter une capture
                      </span>
                    </>
                  )}
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handleScreenshotChange}
                    className="hidden"
                  />
                </label>
                {screenshot && (
                  <button
                    type="button"
                    onClick={() => setScreenshot(null)}
                    className="absolute -top-2 -right-2 p-2 bg-red-500 rounded-full text-white hover:bg-red-600 transition-all"
                  >
                    <FiAlertCircle className="w-4 h-4" />
                  </button>
                )}
              </div>
            </div>
            {/* Clé API */}
            <div className="space-y-2">
              <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700">
                Entrez votre clé API
              </label>
              <div className="relative">
                <FiKey className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                <input
                  type="text"
                  id="apiKey"
                  value={apiKey}
                  onChange={(e) => setApiKey(e.target.value)}
                  required
                  className="block w-full pl-10 pr-4 py-3 rounded-lg border-2 border-gray-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                  placeholder="Coller votre clé API ici"
                />
              </div>
            </div>
            {/* Bouton de soumission */}
            <div className="pt-6">
              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 transition-all transform hover:scale-105"
              >
                {isSubmitting ? (
                  <div className="flex items-center">
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-3"></div>
                    Envoi en cours...
                  </div>
                ) : (
                  <>
                    <FiUpload className="mr-2" />
                    Soumettre le rapport
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      }
    </>
  );
};

export default Avatar;