import type { Metadata } from "next";
import { listContactMessages } from "@/lib/contact/queries";
import { markContactMessageRead, deleteContactMessage } from "@/lib/admin/contact-actions";

export const metadata: Metadata = {
  title: "İletişim",
};

export default async function AdminContactPage() {
  const messages = await listContactMessages();

  return (
    <div className="p-8">
      <div className="mb-6 border-b border-border pb-6">
        <h1 className="text-[22px]">İletişim Mesajları</h1>
        <p className="mt-0.5 text-[12.5px] text-text-muted">{messages.length} mesaj — iletişim formundan gelenler</p>
      </div>

      {messages.length === 0 ? (
        <p className="text-[13.5px] text-text-muted">Henüz mesaj yok.</p>
      ) : (
        <div className="flex flex-col gap-3">
          {messages.map((message) => {
            const markRead = markContactMessageRead.bind(null, message.id);
            const remove = deleteContactMessage.bind(null, message.id);
            return (
              <div
                key={message.id}
                className={`rounded-2xl border p-4 ${message.isRead ? "border-border bg-surface" : "border-accent/40 bg-accent/5"}`}
              >
                <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                  <div className="flex items-center gap-2">
                    <span className="text-[13.5px] font-bold">{message.subject}</span>
                    {!message.isRead && (
                      <span className="rounded-full bg-accent px-2 py-0.5 text-[10px] font-bold text-white">Yeni</span>
                    )}
                  </div>
                  <span className="text-[11.5px] text-text-muted">{message.createdAt.toLocaleString("tr-TR")}</span>
                </div>
                <p className="text-[12.5px] text-text-muted">
                  {message.name} · <a href={`mailto:${message.email}`} className="text-accent hover:underline">{message.email}</a>
                </p>
                <p className="mt-2 whitespace-pre-line text-[14px] text-text">{message.body}</p>
                <div className="mt-3 flex gap-2 border-t border-dashed border-border pt-3">
                  {!message.isRead && (
                    <form action={markRead}>
                      <button className="rounded-lg bg-bg-alt px-3 py-1.5 text-[12px] font-semibold text-text-muted hover:bg-border">
                        Okundu İşaretle
                      </button>
                    </form>
                  )}
                  <form action={remove}>
                    <button className="rounded-lg bg-accent/10 px-3 py-1.5 text-[12px] font-semibold text-accent hover:bg-accent/20">
                      Sil
                    </button>
                  </form>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}