import Link from "next/link";
import { redirect } from "next/navigation";
import { prisma } from "@/lib/db";
import { getUser } from "@/lib/auth";
import { timeAgo } from "@/lib/constants";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import { StatusBadge, PriorityBadge, ProjectChip } from "@/components/Badges";
import LogoutButton from "./LogoutButton";

export const dynamic = "force-dynamic";

export default async function AccountPage() {
  const user = await getUser();
  if (!user) redirect("/login?next=/account");

  const tickets = await prisma.ticket.findMany({
    where: { userId: user.id },
    include: { project: true, _count: { select: { messages: true } } },
    orderBy: { updatedAt: "desc" },
  });

  return (
    <>
      <Nav />
      <main className="max-w-4xl mx-auto px-4 pt-10">
        <div className="flex flex-wrap items-center justify-between gap-3 mb-8">
          <div>
            <h1 className="text-3xl font-extrabold tracking-tight">My tickets</h1>
            <p className="text-muted text-sm mt-1">Signed in as {user.name} ({user.email})</p>
          </div>
          <div className="flex gap-2">
            <Link href="/" className="btn-primary">+ New ticket</Link>
            <LogoutButton />
          </div>
        </div>

        {tickets.length === 0 ? (
          <div className="card p-10 text-center">
            <div className="text-4xl mb-3">🎉</div>
            <p className="font-bold mb-1">No tickets yet</p>
            <p className="text-sm text-muted mb-4">When you create a support ticket it will show up here.</p>
            <Link href="/" className="btn-primary">Get help</Link>
          </div>
        ) : (
          <div className="space-y-3">
            {tickets.map((t) => (
              <Link key={t.id} href={`/tickets/${t.id}`} className="card p-5 flex flex-wrap items-center gap-3 hover:-translate-y-0.5 hover:shadow-pop transition-all">
                <div className="flex-1 min-w-[220px]">
                  <div className="flex items-center gap-2 flex-wrap mb-1.5">
                    <span className="font-mono text-xs font-bold text-muted">{t.number}</span>
                    <ProjectChip project={t.project} />
                  </div>
                  <p className="font-bold">{t.subject}</p>
                  <p className="text-xs text-muted mt-1">
                    {t._count.messages} messages · updated {timeAgo(t.updatedAt)}
                  </p>
                </div>
                <div className="flex gap-2">
                  <StatusBadge status={t.status} />
                  <PriorityBadge priority={t.priority} />
                </div>
              </Link>
            ))}
          </div>
        )}
      </main>
      <Footer />
    </>
  );
}