"use client";

import React, { useState } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Send, Paperclip, X, ArrowLeft } from "lucide-react";
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 variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              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">Destinataire *</Label>
            <Input
              id="destinataire"
              type="email"
              placeholder="email@exemple.com"
              value={destinataire}
              onChange={(e) => setDestinataire(e.target.value)}
              required
              className="mt-2"
            />
          </div>

          <div>
            <Label htmlFor="sujet">Sujet *</Label>
            <Input
              id="sujet"
              type="text"
              placeholder="Objet du message"
              value={sujet}
              onChange={(e) => setSujet(e.target.value)}
              required
              className="mt-2"
            />
          </div>

          <div>
            <Label htmlFor="message">Message *</Label>
            <Textarea
              id="message"
              placeholder="Tapez votre message ici..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
              rows={12}
              className="mt-2"
            />
          </div>

          <div>
            <Label>Pièces jointes</Label>
            <div className="mt-2 space-y-2">
              {fichiers.map((file, index) => (
                <div
                  key={index}
                  className="flex items-center gap-2 p-2 bg-gray-50 rounded"
                >
                  <Paperclip className="h-4 w-4 text-gray-400" />
                  <span className="text-sm flex-1">{file.name}</span>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => removeFile(index)}
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              ))}
              <input
                type="file"
                multiple
                onChange={handleFileChange}
                className="hidden"
                id="file-upload"
              />
              <Button
                type="button"
                variant="outline"
                onClick={() => document.getElementById("file-upload")?.click()}
              >
                <Paperclip className="mr-2 h-4 w-4" />
                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}
            >
              <Send className="mr-2 h-4 w-4" />
              {isSubmitting ? "Envoi en cours..." : "Envoyer"}
            </Button>
            <Link href="/messages">
              <Button type="button" variant="outline">
                Annuler
              </Button>
            </Link>
          </div>
        </form>
      </Card>
    </div>
  );
}