import { Mail, MailOpen } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { DeleteButton } from "@/components/admin/DeleteButton";
import { EmptyState } from "@/components/ui/EmptyState";
import { markContactMessageAsRead, deleteContactMessage } from "./actions";

export default async function AdminContactMessagesPage() {
  const messages = await prisma.contactMessage.findMany({
    orderBy: { createdAt: "desc" },
  });

  const formatDate = (date: Date) =>
    new Intl.DateTimeFormat("id-ID", {
      day: "numeric",
      month: "short",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date);

  return (
    <div>
      <div>
        <h1 className="text-2xl font-semibold text-heading">Pesan Masuk</h1>
        <p className="mt-1 text-sm text-body">
          Pesan yang dikirim pengunjung lewat form Contact.
        </p>
      </div>

      <div className="mt-6 space-y-4">
        {messages.length === 0 ? (
          <div className="rounded-2xl bg-white shadow-sm">
            <EmptyState message="Belum ada pesan masuk." icon={Mail} />
          </div>
        ) : (
          messages.map((message) => (
            <div
              key={message.id}
              className={`rounded-2xl bg-white p-5 shadow-sm ${
                message.status === "unread"
                  ? "border-l-4 border-merah-ranata"
                  : ""
              }`}
            >
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    <h3 className="font-semibold text-heading">
                      {message.name}
                    </h3>
                    {message.status === "unread" && (
                      <span className="rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-merah-ranata">
                        Belum dibaca
                      </span>
                    )}
                  </div>
                  <p className="mt-0.5 text-sm text-muted">
                    {message.email}
                    {message.phone ? ` · ${message.phone}` : ""}
                  </p>
                </div>
                <span className="text-xs text-muted">
                  {formatDate(message.createdAt)}
                </span>
              </div>

              <p className="mt-3 whitespace-pre-line text-sm text-body">
                {message.message}
              </p>

              <div className="mt-4 flex items-center gap-2">
                {message.status === "unread" && (
                  <form action={markContactMessageAsRead.bind(null, message.id)}>
                    <button
                      type="submit"
                      className="flex items-center gap-1.5 rounded-full border border-gray-300 px-3 py-1.5 text-xs font-medium text-heading transition hover:border-merah-ranata hover:text-merah-ranata"
                    >
                      <MailOpen className="h-3.5 w-3.5" />
                      Tandai Dibaca
                    </button>
                  </form>
                )}
                <DeleteButton
                  action={deleteContactMessage.bind(null, message.id)}
                  confirmMessage={`Hapus pesan dari "${message.name}"?`}
                />
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}