import Link from "next/link";
import { redirect } from "next/navigation";
import { BarChart3, Bookmark, Eye, FileText, MessageSquare, PenLine } from "lucide-react";
import { DashboardStat } from "@/components/dashboard-stat";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { formatCompactNumber } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function DashboardPage() {
  const session = await auth();
  if (!session?.user) redirect("/login");

  const [articles, bookmarks, comments] = await Promise.all([
    prisma.article.findMany({ where: { authorId: session.user.id }, orderBy: { updatedAt: "desc" }, take: 12, include: { category: true } }),
    prisma.bookmark.count({ where: { userId: session.user.id } }),
    prisma.comment.count({ where: { userId: session.user.id } })
  ]);

  const views = articles.reduce((total, article) => total + article.views, 0);

  return (
    <section className="px-4 py-10 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
          <div>
            <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">User dashboard</p>
            <h1 className="mt-3 font-display text-4xl font-black text-white">Welcome, {session.user.name || session.user.email}</h1>
          </div>
          <Link href="/dashboard/new" className="inline-flex w-fit items-center gap-2 rounded-full bg-cyanx px-5 py-3 text-sm font-black text-ink"><PenLine size={17} /> New article</Link>
        </div>

        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <DashboardStat label="Articles" value={articles.length} icon={FileText} />
          <DashboardStat label="Views" value={formatCompactNumber(views)} icon={Eye} />
          <DashboardStat label="Bookmarks" value={bookmarks} icon={Bookmark} />
          <DashboardStat label="Comments" value={comments} icon={MessageSquare} />
        </div>

        <div className="glass mt-8 overflow-hidden rounded-lg">
          <div className="border-b border-white/10 p-5">
            <h2 className="font-display text-xl font-bold text-white">Your submissions</h2>
          </div>
          <div className="divide-y divide-white/10">
            {articles.map((article) => (
              <div key={article.id} className="grid gap-2 p-5 sm:grid-cols-[1fr_auto] sm:items-center">
                <div>
                  <p className="font-semibold text-white">{article.title}</p>
                  <p className="mt-1 text-xs text-white/45">{article.category.name} · {article.status} · {article.views} views</p>
                </div>
                <Link href={`/dashboard/edit/${article.id}`} className="text-sm font-semibold text-cyanx">Edit</Link>
              </div>
            ))}
            {!articles.length && <p className="p-5 text-sm text-white/55">No articles yet.</p>}
          </div>
        </div>

        {session.user.role === "ADMIN" && (
          <Link href="/admin" className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-cyanx">
            <BarChart3 size={16} /> Open admin dashboard
          </Link>
        )}
      </div>
    </section>
  );
}