"use client";

import { useEffect, useMemo, useState } from "react";
import PageHeader from "@/components/admin/ui/PageHeader";
import DataTable, { type Column } from "@/components/admin/ui/DataTable";
import StatusBadge from "@/components/admin/ui/StatusBadge";
import Button from "@/components/admin/ui/Button";
import Drawer from "@/components/admin/ui/Drawer";
import Select from "@/components/admin/ui/Select";
import ConfirmDialog from "@/components/admin/ui/ConfirmDialog";
import { toast } from "sonner";
import { getMessages, updateStatutMessage, deleteMessage } from "@/lib/api/admin/messages";
import type { AdminMessage } from "@/types/admin";
import { Mail, MailOpen, CheckCheck, Trash2 } from "lucide-react";

const FILTRES = [
  { value: "", label: "Tous les messages" },
  { value: "0", label: "Non lus" },
  { value: "1", label: "Lus" },
];

export default function AdminMessagesPage() {
  const [messages, setMessages] = useState<AdminMessage[]>([]);
  const [filtreLu, setFiltreLu] = useState("");
  const [chargement, setChargement] = useState(true);
  const [messageSelectionne, setMessageSelectionne] = useState<AdminMessage | null>(null);
  const [actionEnCours, setActionEnCours] = useState(false);
  const [confirmSuppression, setConfirmSuppression] = useState(false);

  const chargerMessages = () => {
    setChargement(true);
    const lu = filtreLu === "" ? undefined : filtreLu === "1";
    getMessages({ limit: 100, lu })
      .then((res) => setMessages(res.items))
      .catch(() => toast.error("Impossible de charger les messages."))
      .finally(() => setChargement(false));
  };

  useEffect(() => {
    chargerMessages();
  }, [filtreLu]);

  const ouvrirMessage = async (msg: AdminMessage) => {
    setMessageSelectionne(msg);
    if (!msg.lu) {
      try {
        await updateStatutMessage(msg.id, { lu: true });
        msg.lu = true;
      } catch {}
    }
  };

  const marquerTraite = async () => {
    if (!messageSelectionne) return;
    setActionEnCours(true);
    try {
      const maj = await updateStatutMessage(messageSelectionne.id, { traite: true });
      setMessageSelectionne(maj);
      toast.success("Message marqué comme traité !");
      chargerMessages();
    } catch {
      toast.error("Erreur lors du traitement du message.");
    } finally {
      setActionEnCours(false);
    }
  };

  const executerSuppression = async () => {
    if (!messageSelectionne) return;
    setActionEnCours(true);
    try {
      await deleteMessage(messageSelectionne.id);
      setConfirmSuppression(false);
      setMessageSelectionne(null);
      toast.success("Message supprimé avec succès.");
      chargerMessages();
    } catch {
      toast.error("Erreur lors de la suppression.");
    } finally {
      setActionEnCours(false);
    }
  };

  const colonnes: Column<AdminMessage>[] = useMemo(
    () => [
      {
        key: "nom",
        label: "Expéditeur",
        sortable: true,
        render: (m) => (
          <div style={{ display: "flex", alignItems: "center", gap: "8px", fontWeight: m.lu ? "normal" : "bold" }}>
            {m.lu ? <MailOpen size={16} color="var(--gris-moyen)" /> : <Mail size={16} color="var(--vert-fonce)" />}
            <span>{m.nom}</span>
          </div>
        ),
      },
      { key: "email", label: "E-mail" },
      { key: "telephone", label: "Téléphone", render: (m) => m.telephone || "—" },
      { key: "sujet", label: "Sujet", sortable: true },
      {
        key: "statut" as any,
        label: "État",
        render: (m) => (
          <div style={{ display: "flex", gap: "6px" }}>
            <StatusBadge status={m.lu ? "LU" : "NON_LU"} />
            {m.traite && <StatusBadge status="TRAITE" />}
          </div>
        ),
      },
      {
        key: "createdAt",
        label: "Date",
        sortable: true,
        render: (m) => new Date(m.createdAt).toLocaleDateString("fr-FR"),
      },
    ],
    [],
  );

  return (
    <div>
      <PageHeader
        title="Messages de contact"
        subtitle="Consultez les demandes envoyées depuis le formulaire public de contact."
      />

      <div style={{ width: "240px", marginBottom: "20px" }}>
        <Select
          options={FILTRES}
          value={filtreLu}
          onChange={(e) => setFiltreLu(e.target.value)}
        />
      </div>

      <DataTable<AdminMessage>
        columns={colonnes}
        data={messages}
        isLoading={chargement}
        keyExtractor={(m) => m.id}
        onRowClick={(m) => ouvrirMessage(m)}
        emptyTitle="Aucun message reçu"
      />

      <Drawer
        open={messageSelectionne !== null}
        onClose={() => setMessageSelectionne(null)}
        title={messageSelectionne?.sujet ?? "Détail du message"}
        subtitle={`De ${messageSelectionne?.nom} (${messageSelectionne?.email})`}
      >
        {messageSelectionne && (
          <div style={{ display: "flex", flexDirection: "column", gap: "20px", marginTop: "16px" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
              <span style={{ fontSize: "12px", color: "var(--gris-moyen)" }}>Coordonnées</span>
              <div style={{ fontSize: "14px", fontWeight: 600 }}>
                {messageSelectionne.email} {messageSelectionne.telephone ? `• ${messageSelectionne.telephone}` : ""}
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
              <span style={{ fontSize: "12px", color: "var(--gris-moyen)" }}>Message</span>
              <div
                style={{
                  background: "var(--gris-clair)",
                  padding: "16px",
                  borderRadius: "8px",
                  fontSize: "14px",
                  lineHeight: "1.6",
                  whiteSpace: "pre-wrap",
                }}
              >
                {messageSelectionne.message}
              </div>
            </div>

            <div style={{ display: "flex", gap: "12px", marginTop: "12px" }}>
              {!messageSelectionne.traite && (
                <Button onClick={marquerTraite} loading={actionEnCours}>
                  <CheckCheck size={16} />
                  Marquer comme traité
                </Button>
              )}
              <Button variant="danger" onClick={() => setConfirmSuppression(true)} loading={actionEnCours}>
                <Trash2 size={16} />
                Supprimer
              </Button>
            </div>
          </div>
        )}
      </Drawer>

      <ConfirmDialog
        open={confirmSuppression}
        title="Supprimer ce message ?"
        description="Cette demande de contact sera définitivement supprimée."
        confirmLabel="Supprimer"
        danger
        onConfirm={executerSuppression}
        onCancel={() => setConfirmSuppression(false)}
      />
    </div>
  );
}