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

type AdminMessageDetailPageProps = {
  params: Promise<{ id: string }>;
};

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

export default async function AdminMessageDetailPage({ params }: AdminMessageDetailPageProps) {
  const session = await requirePermission("contact");
  const { id } = await params;
  const message = await prisma.contactMessage.findUnique({ where: { id } });

  if (!message) {
    notFound();
  }

  if (!message.isRead) {
    await prisma.contactMessage.update({
      where: { id: message.id },
      data: {
        isRead: true,
        readAt: new Date()
      }
    });
  }

  return (
      <>

      <div className="section-head">
        <div>
          <span className="pill">Contact Message</span>
          <h1 className="admin-title">{message.name}</h1>
          <p className="muted">Received on {formatDate(message.createdAt)}</p>
        </div>
        <Link className="btn btn-secondary" href="/admin/messages">Back to Messages</Link>
      </div>

      <section className="glass-panel">
        <div className="admin-panel-heading">
          <div>
            <span className="status-badge">READ</span>
            <h2>Message Details</h2>
          </div>
        </div>
        <div className="admin-list">
          <div className="admin-list-item">
            <span>
              <strong>Email</strong>
              <span className="muted">{message.email}</span>
            </span>
          </div>
          <div className="admin-list-item">
            <span>
              <strong>Phone</strong>
              <span className="muted">{message.phone ?? "No phone"}</span>
            </span>
          </div>
          <div className="card">
            <span className="pill">Message</span>
            <p style={{ lineHeight: 1.8, marginTop: 12, whiteSpace: "pre-wrap" }}>{message.message}</p>
          </div>
        </div>
        <div style={{ marginTop: 18 }}>
          <AdminRowActions
            deleteAction={deleteContactMessageAction}
            deleteConfirm="Delete this message permanently?"
            deleteId={message.id}
            viewHref={`mailto:${message.email}`}
            viewLabel="Reply via email"
          >
            <form action={markContactMessageReadAction}>
              <input name="id" type="hidden" value={message.id} />
              <button className="admin-btn admin-btn-modify" type="submit">
                Mark read
              </button>
            </form>
          </AdminRowActions>
        </div>
      </section>
      </>
    );
}