"use client";

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

/**
 * Page des messages archivés
 * Affiche tous les messages archivés avec possibilité de restauration
 */
export default function MessagesArchivesPage() {
  const [searchTerm, setSearchTerm] = useState("");

  const messagesArchives = [
    {
      id: "1",
      from: "Ancien Client",
      fromEmail: "ancien@client.fr",
      subject: "Projet terminé - Retour d'expérience",
      preview: "Nous tenions à vous remercier pour le travail effectué...",
      date: "2025-09-15T10:00:00",
      archivedDate: "2025-10-01T14:30:00",
    },
    {
      id: "2",
      from: "Fournisseur Matériaux",
      fromEmail: "contact@fournisseur.com",
      subject: "Catalogue 2024 - Nouveaux produits",
      preview: "Découvrez notre nouveau catalogue avec nos dernières innovations...",
      date: "2025-08-20T09:15:00",
      archivedDate: "2025-09-10T11:00:00",
    },
  ];

  const filteredMessages = messagesArchives.filter(
    (message) =>
      message.from.toLowerCase().includes(searchTerm.toLowerCase()) ||
      message.subject.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "long",
      year: "numeric",
    });
  };

  const handleRestore = (id: string) => {
    alert(`Message ${id} restauré dans la boîte de réception`);
  };

  const handleDelete = (id: string) => {
    if (confirm("Voulez-vous vraiment supprimer définitivement ce message ?")) {
      alert(`Message ${id} supprimé définitivement`);
    }
  };

  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 archivés</h1>
          <p className="text-gray-500 mt-1">
            {messagesArchives.length} message{messagesArchives.length > 1 ? "s" : ""}{" "}
            archivé{messagesArchives.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 outlined>
            <i className="pi pi-send mr-2"></i>
            Envoyés
          </Button>
        </Link>
        <Link href="/messages/archives">
          <Button className="bg-blue-600">
            <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 archives..."
            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"
              >
                <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">
                        <p className="font-semibold">{message.from}</p>
                        <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>
                        <p className="text-xs text-gray-400 mt-2">
                          Archivé le {formatDate(message.archivedDate)}
                        </p>
                      </div>
                      <div className="flex items-center gap-2 flex-shrink-0">
                        <Button
                          outlined
                          size="small"
                          onClick={() => handleRestore(message.id)}
                        >
                          <i className="pi pi-replay mr-2"></i>
                          Restaurer
                        </Button>
                        <Button
                          outlined
                          size="small"
                          onClick={() => handleDelete(message.id)}
                          className="text-red-600 hover:text-red-700"
                        >
                          <i className="pi pi-trash"></i>
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="p-12 text-center">
              <i className="pi pi-inbox text-gray-400 mx-auto mb-4" style={{ fontSize: '3rem' }}></i>
              <p className="text-gray-500">Aucun message archivé</p>
            </div>
          )}
        </div>
      </Card>

      <Card className="p-4 bg-blue-50 border-blue-200">
        <div className="flex items-start gap-3">
          <i className="pi pi-inbox text-blue-600 flex-shrink-0 mt-0.5" style={{ fontSize: '1.25rem' }}></i>
          <div className="flex-1">
            <h3 className="font-semibold text-blue-900">À propos des archives</h3>
            <p className="text-sm text-blue-700 mt-1">
              Les messages archivés sont conservés pendant 90 jours avant d'être supprimés
              automatiquement. Vous pouvez restaurer un message archivé à tout moment
              pour le retrouver dans votre boîte de réception.
            </p>
          </div>
        </div>
      </Card>
    </div>
  );
}