import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { prisma } from "@/app/lib/db";
import {
  deleteContact,
  updateContactStatus,
} from "@/app/actions/admin";
import { PageHeader, StatusBadge } from "@/app/admin/_components/ui";
import { formatDate } from "@/app/admin/_components/utils";

export const metadata: Metadata = {
  title: "Contact detail",
};

export default async function ContactDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const contact = await prisma.contactSubmission.findUnique({ where: { id } });
  if (!contact) notFound();

  const updateAction = updateContactStatus.bind(null, contact.id);
  const deleteAction = deleteContact.bind(null, contact.id);

  return (
    <div>
      <PageHeader
        title={contact.name}
        description={contact.subject}
        action={
          <Link
            href="/admin/contacts"
            className="text-sm font-semibold text-[#1f3fb8] hover:underline"
          >
            ← Back to inbox
          </Link>
        }
      />

      <div className="grid grid-cols-1 lg:grid-cols-[1.4fr_0.8fr] gap-6">
        <section className="rounded-2xl border border-[#d9e2f7] bg-white p-5 sm:p-6 space-y-4">
          <div className="flex items-center gap-3">
            <StatusBadge status={contact.status} />
            <span className="text-xs text-[#7a88ad]">
              Received {formatDate(contact.createdAt)}
            </span>
          </div>
          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
            <div>
              <dt className="text-[#7a88ad]">Email</dt>
              <dd className="font-medium">{contact.email}</dd>
            </div>
            <div>
              <dt className="text-[#7a88ad]">Phone</dt>
              <dd className="font-medium">{contact.phone || "—"}</dd>
            </div>
            <div className="sm:col-span-2">
              <dt className="text-[#7a88ad]">Message</dt>
              <dd className="mt-1 whitespace-pre-wrap leading-relaxed text-[#3d4f84]">
                {contact.message}
              </dd>
            </div>
          </dl>
        </section>

        <aside className="space-y-4">
          <form
            action={updateAction}
            className="rounded-2xl border border-[#d9e2f7] bg-white p-5 space-y-3"
          >
            <h2 className="text-sm font-semibold">Update status</h2>
            <select
              name="status"
              defaultValue={contact.status}
              className="w-full rounded-lg border border-[#d9e2f7] px-3 py-2.5 text-sm"
            >
              <option value="new">New</option>
              <option value="in_progress">In progress</option>
              <option value="resolved">Resolved</option>
            </select>
            <button
              type="submit"
              className="w-full rounded-full bg-[#1f3fb8] px-4 py-2.5 text-sm font-semibold text-white hover:bg-[#18339a]"
            >
              Save status
            </button>
          </form>

          <form action={deleteAction} className="rounded-2xl border border-red-100 bg-white p-5">
            <h2 className="text-sm font-semibold text-red-700">Delete message</h2>
            <p className="mt-1 text-xs text-[#7a88ad]">
              This permanently removes the submission.
            </p>
            <button
              type="submit"
              className="mt-4 w-full rounded-full border border-red-200 px-4 py-2.5 text-sm font-semibold text-red-600 hover:bg-red-50"
            >
              Delete
            </button>
          </form>
        </aside>
      </div>
    </div>
  );
}
