btpxpress-frontend/app/(main)/messages/envoyes/page.tsx

"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 { Badge } from "@/components/ui/badge";
import { Send, Search, Mail, Archive, Trash2, MoreVertical } from "lucide-react";
import Link from "next/link";

/**
 * Page des messages envoyés
 * Affiche l'historique de tous les messages envoyés
 */
export default function MessagesEnvoyesPage() {
  const [searchTerm, setSearchTerm] = useState("");

  const messagesenvoyes = [
    {
      id: "1",
      to: "Jean Dupont",
      toEmail: "jean.dupont@btpxpress.fr",
      subject: "RE: Demande de devis pour chantier Lyon",
      preview: "Bonjour Jean, voici le devis demandé pour le projet...",
      date: "2025-10-30T11:00:00",
      status: "delivered",
    },
    {
      id: "2",
      to: "Marie Martin",
      toEmail: "marie.martin@client.fr",
      subject: "Confirmation planning",
      preview: "Bonjour Marie, je confirme la réception de votre validation...",
      date: "2025-10-30T09:30:00",
      status: "read",
    },
    {
      id: "3",
      to: "Pierre Leblanc",
      toEmail: "p.leblanc@entreprise.com",
      subject: "RE: Question sur facture #2024-103",
      preview: "Bonjour Pierre, concernant votre question sur la facture...",
      date: "2025-10-29T17:00:00",
      status: "delivered",
    },
  ];

  const filteredMessages = messagesenvoyes.filter(
    (message) =>
      message.to.toLowerCase().includes(searchTerm.toLowerCase()) ||
      message.subject.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleString("fr-FR", {
      day: "2-digit",
      month: "short",
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "read":
        return <Badge className="bg-green-100 text-green-800">Lu</Badge>;
      case "delivered":
        return <Badge className="bg-blue-100 text-blue-800">Envoyé</Badge>;
      default:
        return <Badge>En cours</Badge>;
    }
  };

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Messages envoyés</h1>
          <p className="text-gray-500 mt-1">
            {messagesenvoyes.length} message{messagesenvoyes.length > 1 ? "s" : ""}{" "}
            envoyé{messagesenvoyes.length > 1 ? "s" : ""}
          </p>
        </div>
        <Link href="/messages/nouveau">
          <Button className="bg-blue-600 hover:bg-blue-700">
            <Send className="mr-2 h-4 w-4" />
            Nouveau message
          </Button>
        </Link>
      </div>

      <div className="flex gap-2">
        <Link href="/messages">
          <Button variant="outline">
            <Mail className="mr-2 h-4 w-4" />
            Reçus
          </Button>
        </Link>
        <Link href="/messages/envoyes">
          <Button variant="default" className="bg-blue-600">
            <Send className="mr-2 h-4 w-4" />
            Envoyés
          </Button>
        </Link>
        <Link href="/messages/archives">
          <Button variant="outline">
            <Archive className="mr-2 h-4 w-4" />
            Archives
          </Button>
        </Link>
      </div>

      <Card className="p-4">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
          <Input
            placeholder="Rechercher dans les messages envoyés..."
            className="pl-10"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </Card>

      <Card>
        <div className="divide-y">
          {filteredMessages.length > 0 ? (
            filteredMessages.map((message) => (
              <div
                key={message.id}
                className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
              >
                <div className="flex items-start gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <p className="font-semibold">À: {message.to}</p>
                          {getStatusBadge(message.status)}
                        </div>
                        <p className="text-sm font-medium text-gray-900 truncate">
                          {message.subject}
                        </p>
                        <p className="text-sm text-gray-500 truncate mt-1">
                          {message.preview}
                        </p>
                      </div>
                      <div className="flex items-center gap-4 flex-shrink-0">
                        <span className="text-sm text-gray-500">
                          {formatDate(message.date)}
                        </span>
                        <button className="hover:bg-gray-200 rounded p-1">
                          <MoreVertical className="h-4 w-4 text-gray-400" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="p-12 text-center">
              <Send className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-500">Aucun message envoyé</p>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}