import Link from "next/link";
import { redirect } from "next/navigation";
import { getCurrentCustomerId } from "@/lib/customer-auth";
import { prisma } from "@/lib/prisma";
import { formatDate } from "@/lib/format";
import { createTicket } from "@/lib/actions/support";

export const metadata = { title: "My Support Tickets — Iniyaval Return Gifts" };

const STATUS_LABEL: Record<string, string> = {
  open: "Open",
  in_progress: "In progress",
  resolved: "Resolved",
  closed: "Closed",
};

export default async function AccountSupportPage() {
  const customerId = await getCurrentCustomerId();
  if (!customerId) redirect("/account/login");

  const [customer, tickets] = await Promise.all([
    prisma.customer.findUniqueOrThrow({ where: { id: customerId } }),
    prisma.supportTicket.findMany({ where: { customerId }, orderBy: { createdAt: "desc" } }),
  ]);

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-rose-800">Support</h1>
      <p className="mt-1 text-sm text-stone-500">Questions or issues with an order — we typically reply within a day.</p>

      <div className="mt-4 space-y-3">
        {tickets.length === 0 ? (
          <p className="rounded-lg border border-rose-100 bg-white p-4 text-sm text-stone-500">No support tickets yet.</p>
        ) : (
          tickets.map((t) => (
            <Link
              key={t.id}
              href={`/support/${t.id}?email=${encodeURIComponent(t.email)}`}
              className="block rounded-lg border border-rose-100 bg-white p-4 text-sm hover:border-rose-200"
            >
              <div className="flex items-center justify-between">
                <p className="font-medium text-stone-800">{t.subject}</p>
                <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${t.status === "resolved" || t.status === "closed" ? "bg-emerald-100 text-emerald-800" : "bg-amber-100 text-amber-800"}`}>
                  {STATUS_LABEL[t.status]}
                </span>
              </div>
              <p className="mt-1 text-xs text-stone-400">{formatDate(t.createdAt)}</p>
            </Link>
          ))
        )}
      </div>

      <div className="mt-6 rounded-lg border border-rose-100 bg-white p-4">
        <h2 className="text-sm font-semibold text-stone-700">Open a new ticket</h2>
        <form action={createTicket} className="mt-3 space-y-2">
          <input type="hidden" name="name" value={customer.name ?? customer.email} />
          <input type="hidden" name="email" value={customer.email} />
          <input name="subject" required maxLength={150} placeholder="Subject" className="block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm" />
          <textarea name="body" required maxLength={5000} rows={3} placeholder="Describe your question or issue" className="block w-full rounded-md border border-stone-300 px-2 py-1.5 text-sm" />
          <button type="submit" className="rounded-md bg-rose-700 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-800">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}