"use client";

import React, { useState } from "react";
import { Card } from "primereact/card";
import { Button } from "primereact/button";
import { InputText } from "primereact/inputtext";
import { Tag } from "primereact/tag";
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 getStatusTag = (status: string) => {
    switch (status) {
      case "read":
        return <Tag severity="success" value="Lu" />;
      case "delivered":
        return <Tag severity="info" value="Envoyé" />;
      default:
        return <Tag value="En cours" />;
    }
  };

  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">
            <i className="pi pi-send mr-2"></i>
            Nouveau message
          </Button>
        </Link>
      </div>

      <div className="flex gap-2">
        <Link href="/messages">
          <Button outlined>
            <i className="pi pi-envelope mr-2"></i>
            Reçus
          </Button>
        </Link>
        <Link href="/messages/envoyes">
          <Button className="bg-blue-600">
            <i className="pi pi-send mr-2"></i>
            Envoyés
          </Button>
        </Link>
        <Link href="/messages/archives">
          <Button outlined>
            <i className="pi pi-inbox mr-2"></i>
            Archives
          </Button>
        </Link>
      </div>

      <Card className="p-4">
        <span className="p-input-icon-left w-full">
          <i className="pi pi-search" />
          <InputText
            placeholder="Rechercher dans les messages envoyés..."
            className="w-full"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </span>
      </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>
                          {getStatusTag(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">
                          <i className="pi pi-ellipsis-v text-gray-400"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="p-12 text-center">
              <i className="pi pi-send text-gray-400 mx-auto mb-4" style={{ fontSize: '3rem' }}></i>
              <p className="text-gray-500">Aucun message envoyé</p>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}