import Link from "next/link";
import { AdminRowActions } from "@/admin/components/AdminRowActions";
import { deleteContactMessageAction, markContactMessageReadAction } from "@/lib/actions";
import { isSuperAdmin, requirePermission } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

function formatDate(date: Date) {
  return new Intl.DateTimeFormat("en", {
    dateStyle: "medium",
    timeStyle: "short"
  }).format(date);
}

export default async function AdminMessagesPage() {
  const session = await requirePermission("contact");
  const superAdmin = isSuperAdmin(session);
  const [messages, unreadCount] = await Promise.all([
    prisma.contactMessage.findMany({
      orderBy: [{ isRead: "asc" }, { createdAt: "desc" }]
    }),
    prisma.contactMessage.count({ where: { isRead: false } })
  ]);

  return (
    <>
      <div className="section-head">
        <div>
          <span className="pill">Contact Inbox</span>
          <h1 className="admin-title">User Messages</h1>
          <p className="muted">
            Messages submitted from the public contact form. {unreadCount} unread.
            {superAdmin ? " Super Admin can delete any message." : ""}
          </p>
        </div>
      </div>

      <section className="glass-panel">
        <div className="admin-panel-heading">
          <div>
            <span className="pill">
              {messages.length} message{messages.length === 1 ? "" : "s"}
            </span>
            <h2>Received Messages</h2>
          </div>
        </div>

        <div className="data-table-wrap">
          <table className="data-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Contact</th>
                <th>Message</th>
                <th>Received</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {messages.map((message) => (
                <tr key={message.id}>
                  <td>{message.name}</td>
                  <td>
                    <span className="status-badge">{message.isRead ? "READ" : "UNREAD"}</span>
                  </td>
                  <td>
                    <strong>{message.email}</strong>
                    <br />
                    <span className="muted">{message.phone ?? "No phone"}</span>
                  </td>
                  <td style={{ minWidth: 320, whiteSpace: "normal" }}>{message.message}</td>
                  <td>{formatDate(message.createdAt)}</td>
                  <td>
                    <AdminRowActions
                      deleteAction={deleteContactMessageAction}
                      deleteConfirm={`Delete message from ${message.name}?`}
                      deleteId={message.id}
                      modifyHref={`/admin/messages/${message.id}`}
                      modifyLabel="Open"
                      viewHref={`/admin/messages/${message.id}`}
                    >
                      {!message.isRead ? (
                        <form action={markContactMessageReadAction}>
                          <input name="id" type="hidden" value={message.id} />
                          <button className="admin-btn admin-btn-modify" type="submit">
                            Mark read
                          </button>
                        </form>
                      ) : null}
                    </AdminRowActions>
                  </td>
                </tr>
              ))}
              {messages.length === 0 ? (
                <tr>
                  <td className="admin-empty-state" colSpan={6}>
                    No messages received yet.
                  </td>
                </tr>
              ) : null}
            </tbody>
          </table>
        </div>
      </section>
    </>
  );
}