"use client";

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Button from "@/components/ui/button/Button";
import { CommunicationType } from '@/types/types';

interface Partner {
  id: number;
  name: string;
}

interface Folder {
  id: number;
  firstName: string;
  lastName?: string;
}

interface CommunicationFormProps {
  communicationId?: number; // Si présent, mode édition
}

const CommunicationForm: React.FC<CommunicationFormProps> = ({ communicationId }) => {
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [partners, setPartners] = useState<Partner[]>([]);
  const [folders, setFolders] = useState<Folder[]>([]);
  const [formData, setFormData] = useState({
    subject: '',
    type: CommunicationType.SENT,
    description: '',
    date: new Date().toISOString().split('T')[0],
    partnerId: '',
    folderId: ''
  });
  const [files, setFiles] = useState<File[]>([]);
  const router = useRouter();

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        // Charger les partenaires
        const partnersResponse = await fetch('/api/partners');
        const partnersData = await partnersResponse.json();
        setPartners(partnersData);

        // Charger les dossiers
        const foldersResponse = await fetch('/api/folders');
        const foldersData = await foldersResponse.json();
        setFolders(foldersData);

        // Si en mode édition, charger la communication
        if (communicationId) {
          const commResponse = await fetch(`/api/communications/${communicationId}`);
          const commData = await commResponse.json();
          setFormData({
            subject: commData.subject,
            type: commData.type,
            description: commData.description,
            date: new Date(commData.date).toISOString().split('T')[0],
            partnerId: commData.partnerId.toString(),
            folderId: commData.folderId ? commData.folderId.toString() : ''
          });
        }
      } catch (error) {
        console.error('Erreur lors du chargement des données:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [communicationId]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const fileArray = Array.from(e.target.files);
      setFiles(prev => [...prev, ...fileArray]);
    }
  };

  const removeFile = (index: number) => {
    setFiles(prev => prev.filter((_, i) => i !== index));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);

    try {
      // Créer un FormData pour l'envoi des fichiers
      const data = new FormData();
      data.append('subject', formData.subject);
      data.append('type', formData.type);
      data.append('description', formData.description);
      data.append('date', formData.date);
      data.append('partnerId', formData.partnerId);
      if (formData.folderId) data.append('folderId', formData.folderId);

      // Ajouter les fichiers
      files.forEach(file => {
        data.append('files', file);
      });

      // Envoyer la requête
      const url = communicationId 
        ? `/api/communications/${communicationId}` 
        : '/api/communications';
      const method = communicationId ? 'PUT' : 'POST';

      const response = await fetch(url, {
        method,
        body: data
      });

      if (!response.ok) throw new Error('Erreur lors de l\'enregistrement');

      // Rediriger vers la liste des communications
      router.push('/communications');
    } catch (error) {
      console.error('Erreur:', error);
      alert('Une erreur est survenue lors de l\'enregistrement');
    } finally {
      setSubmitting(false);
    }
  };

  if (loading) {
    return <div className="p-4 text-center">Chargement...</div>;
  }

  return (
    <div className="bg-white dark:bg-white/[0.03] rounded-xl border border-gray-200 dark:border-white/[0.05] p-6">
      <h1 className="text-2xl font-bold mb-6">
        {communicationId ? 'Modifier la communication' : 'Nouvelle communication'}
      </h1>

      <form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="subject">
              Sujet *
            </label>
            <input
              type="text"
              id="subject"
              name="subject"
              value={formData.subject}
              onChange={handleChange}
              required
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="type">
              Type *
            </label>
            <select
              id="type"
              name="type"
              value={formData.type}
              onChange={handleChange}
              required
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {Object.values(CommunicationType).map(type => (
                <option key={type} value={type}>{type}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="date">
              Date *
            </label>
            <input
              type="date"
              id="date"
              name="date"
              value={formData.date}
              onChange={handleChange}
              required
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="partnerId">
              Partenaire *
            </label>
            <select
              id="partnerId"
              name="partnerId"
              value={formData.partnerId}
              onChange={handleChange}
              required
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Sélectionnez un partenaire</option>
              {partners.map(partner => (
                <option key={partner.id} value={partner.id}>{partner.name}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="folderId">
              Dossier (optionnel)
            </label>
            <select
              id="folderId"
              name="folderId"
              value={formData.folderId}
              onChange={handleChange}
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">Aucun dossier</option>
              {folders.map(folder => (
                <option key={folder.id} value={folder.id}>
                  {folder.firstName} {folder.lastName}
                </option>
              ))}
            </select>
          </div>
        </div>

        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="description">
            Description *
          </label>
          <textarea
            id="description"
            name="description"
            value={formData.description}
            onChange={handleChange}
            required
            rows={6}
            className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div className="mb-6">
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Pièces jointes
          </label>
          <input
            type="file"
            onChange={handleFileChange}
            multiple
            className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />

          {files.length > 0 && (
            <ul className="mt-2 space-y-1">
              {files.map((file, index) => (
                <li key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                  <span>{file.name}</span>
                  <button 
                    type="button" 
                    onClick={() => removeFile(index)}
                    className="text-red-500 hover:text-red-700"
                  >
                    Supprimer
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="flex justify-end space-x-2">
          <Button 
            type="button" 
            onClick={() => router.back()}
            variant="secondary"
          >
            Annuler
          </Button>
          <Button 
            type="submit" 
            disabled={submitting}
            variant="primary"
          >
            {submitting ? 'Enregistrement...' : 'Enregistrer'}
          </Button>
        </div>
      </form>
    </div>
  );
};

export default CommunicationForm;