import Link from "next/link";
import { notFound } from "next/navigation";
import { ChevronDown } from "lucide-react";
import { AdminPageHeader, AdminStatusBadge } from "@/components/admin/AdminPresentation";
import { prisma } from "@/lib/prisma";
import { updateContactTicket } from "@/lib/service-request-actions";

const requestStatuses = [
  ["NEW", "New"],
  ["IN_REVIEW", "In Review"],
  ["CONTACTED", "Contacted"],
  ["RESOLVED", "Resolved"],
  ["CLOSED", "Closed"]
];

const selectClassName = "w-full cursor-pointer appearance-none rounded border border-[#D8C98F] bg-white px-3 py-2 pr-11 font-bold text-[#171717] shadow-sm transition hover:border-[#B9922F] focus:border-[#B9922F] focus:outline-none focus:ring-2 focus:ring-[#D8C98F]";

function statusOptions(current?: string | null) {
  const options = [...requestStatuses];
  if (current && !options.some(([value]) => value === current)) {
    options.unshift([current, current]);
  }
  return options;
}

export default async function ContactTicketDetailPage({ params }: { params: { id: string } }) {
  const record = await prisma.contactTicket.findUnique({ where: { id: params.id } });
  if (!record) notFound();

  const updateRecord = updateContactTicket.bind(null, record.id);

  return (
    <section>
      <AdminPageHeader
        title={record.subject}
        subtitle="Customer support message submitted from the public storefront."
        action={<Link href="/admin/contact-tickets" className="btn btn-secondary">Back to Contact Tickets</Link>}
      />

      <div className="grid gap-4 md:grid-cols-3">
        <div className="panel p-4"><div className="text-[#666]">Status</div><div className="mt-2"><AdminStatusBadge value={record.status} /></div></div>
        <div className="panel p-4"><div className="text-[#666]">Created</div><strong>{record.createdAt.toLocaleString()}</strong></div>
        <div className="panel p-4"><div className="text-[#666]">Attachment Link</div><strong>{record.attachmentUrl || "None provided"}</strong></div>
      </div>

      <div className="mt-6 grid gap-6 xl:grid-cols-[1.3fr_0.9fr]">
        <div className="grid gap-6">
          <div className="panel grid gap-4 p-5 md:grid-cols-2">
            <h2 className="text-xl font-black md:col-span-2">Customer Details</h2>
            <div><div className="text-sm text-[#666]">Name</div><strong>{record.fullName}</strong></div>
            <div><div className="text-sm text-[#666]">Email</div><strong>{record.email}</strong></div>
            <div className="md:col-span-2"><div className="text-sm text-[#666]">Phone</div><strong>{record.phone || "Not provided"}</strong></div>
          </div>

          <div className="panel grid gap-4 p-5">
            <h2 className="text-xl font-black">Message</h2>
            <div><div className="text-sm text-[#666]">Subject</div><strong>{record.subject}</strong></div>
            <div><div className="text-sm text-[#666]">Submitted Message</div><p className="mt-2 whitespace-pre-wrap text-[#333]">{record.message}</p></div>
          </div>
        </div>

        <form action={updateRecord} className="panel grid h-fit gap-4 p-5">
          <h2 className="text-xl font-black">Ticket Controls</h2>
          <label>
            Status
            <span className="relative mt-1 block">
              <select name="status" defaultValue={record.status} className={selectClassName}>
                {statusOptions(record.status).map(([value, label]) => <option key={value} value={value}>{label}</option>)}
              </select>
              <ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[#7A5310]" size={18} />
            </span>
          </label>
          <p className="text-sm text-[#666]">Contact tickets support status updates in this sprint. Internal notes stay out of scope because the current schema does not include an adminNotes field.</p>
          <button className="btn btn-primary w-fit">Save Ticket Status</button>
        </form>
      </div>
    </section>
  );
}