"use client";

import React, { useState } from "react";
import { Card } from "primereact/card";
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import { InputTextarea } from "primereact/inputtextarea";
import Link from "next/link";
import { useRouter } from "next/navigation";

/**
 * Page de création de nouveau message
 * Permet de composer et envoyer un nouveau message
 */
export default function NouveauMessagePage() {
  const router = useRouter();
  const [destinataire, setDestinataire] = useState("");
  const [sujet, setSujet] = useState("");
  const [message, setMessage] = useState("");
  const [fichiers, setFichiers] = useState<File[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

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

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

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

    // Simuler l'envoi
    await new Promise((resolve) => setTimeout(resolve, 1500));

    alert("Message envoyé avec succès !");
    router.push("/messages");
  };

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/messages">
            <Button text size="small">
              <i className="pi pi-arrow-left mr-2"></i>
              Retour
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Nouveau message</h1>
            <p className="text-gray-500 mt-1">Composer un nouveau message</p>
          </div>
        </div>
      </div>

      <Card className="p-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="destinataire" className="block mb-2">Destinataire *</label>
            <InputText
              id="destinataire"
              type="email"
              placeholder="email@exemple.com"
              value={destinataire}
              onChange={(e) => setDestinataire(e.target.value)}
              required
              className="w-full"
            />
          </div>

          <div>
            <label htmlFor="sujet" className="block mb-2">Sujet *</label>
            <InputText
              id="sujet"
              type="text"
              placeholder="Objet du message"
              value={sujet}
              onChange={(e) => setSujet(e.target.value)}
              required
              className="w-full"
            />
          </div>

          <div>
            <label htmlFor="message" className="block mb-2">Message *</label>
            <InputTextarea
              id="message"
              placeholder="Tapez votre message ici..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
              rows={12}
              className="w-full"
            />
          </div>

          <div>
            <label className="block mb-2">Pièces jointes</label>
            <div className="space-y-2">
              {fichiers.map((file, index) => (
                <div
                  key={index}
                  className="flex items-center gap-2 p-2 bg-gray-50 rounded"
                >
                  <i className="pi pi-paperclip text-gray-400"></i>
                  <span className="text-sm flex-1">{file.name}</span>
                  <Button
                    type="button"
                    text
                    size="small"
                    onClick={() => removeFile(index)}
                  >
                    <i className="pi pi-times"></i>
                  </Button>
                </div>
              ))}
              <input
                type="file"
                multiple
                onChange={handleFileChange}
                className="hidden"
                id="file-upload"
              />
              <Button
                type="button"
                outlined
                onClick={() => document.getElementById("file-upload")?.click()}
              >
                <i className="pi pi-paperclip mr-2"></i>
                Ajouter une pièce jointe
              </Button>
            </div>
          </div>

          <div className="flex gap-4">
            <Button
              type="submit"
              className="bg-blue-600 hover:bg-blue-700"
              disabled={isSubmitting}
            >
              <i className="pi pi-send mr-2"></i>
              {isSubmitting ? "Envoi en cours..." : "Envoyer"}
            </Button>
            <Link href="/messages">
              <Button type="button" outlined>
                Annuler
              </Button>
            </Link>
          </div>
        </form>
      </Card>
    </div>
  );
}