import { verifySession, clearSession } from "@/core/security/session";
import { Link, redirect } from "@/i18n/routing";
import { getLocale } from "next-intl/server";
import { LogOut, ArrowRight, Code2, Inbox, Briefcase, FolderKanban } from "lucide-react";
import { prisma } from "@/core/db/prisma";

export default async function DashboardPage() {
  const session = await verifySession();
  const locale = await getLocale();

  if (!session) {
    redirect({ href: "/admin/login", locale });
  }

  // Fetch counts in parallel
  const [projectCount, skillCount, unreadMessageCount, experienceCount] =
    await Promise.all([
      prisma.project.count(),
      prisma.skill.count(),
      prisma.message.count({ where: { isRead: false } }),
      prisma.experience.count(),
    ]);

  const cards = [
    {
      href: "/admin/dashboard/projects",
      icon: <FolderKanban size={22} />,
      title: "Projects",
      description: "Manage portfolio projects and case studies.",
      count: projectCount,
      color: "text-accent",
      accentClass: "from-accent to-purple-500",
    },
    {
      href: "/admin/dashboard/skills",
      icon: <Code2 size={22} />,
      title: "Tech Stack",
      description: "Update your skills and technical arsenal.",
      count: skillCount,
      color: "text-emerald-500",
      accentClass: "from-emerald-500 to-teal-500",
    },
    {
      href: "/admin/dashboard/inbox",
      icon: <Inbox size={22} />,
      title: "Inbox",
      description: "Read messages from visitors.",
      count: unreadMessageCount,
      color: "text-blue-500",
      accentClass: "from-blue-500 to-cyan-500",
      badge: unreadMessageCount > 0 ? `${unreadMessageCount} baru` : null,
    },
    {
      href: "/admin/dashboard/experience",
      icon: <Briefcase size={22} />,
      title: "Experience",
      description: "Manage your career timeline.",
      count: experienceCount,
      color: "text-violet-500",
      accentClass: "from-violet-500 to-purple-500",
    },
  ];

  return (
    <div className="min-h-screen bg-muted/30">
      {/* Navbar Minimal Dashboard */}
      <header className="glass border-b border-border/50 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex flex-col">
            <h1 className="text-xl font-bold tracking-tight">Admin Dashboard</h1>
            <span className="text-xs text-muted-foreground">{session.email}</span>
          </div>

          <form
            action={async () => {
              "use server";
              await clearSession();
              redirect({ href: "/admin/login", locale });
            }}
          >
            <button
              type="submit"
              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-500 hover:bg-red-500/10 hover:border-red-500/30 border border-transparent rounded-lg transition-colors"
            >
              <LogOut size={16} />
              Sign Out
            </button>
          </form>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-6 py-12">
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {cards.map((card) => (
            <Link
              key={card.href}
              href={card.href}
              className="relative p-6 rounded-2xl bg-card border border-border/50 shadow-sm hover:shadow-lg hover:border-accent/30 hover:-translate-y-1 transition-all group block overflow-hidden"
            >
              {/* Top accent bar */}
              <div className={`absolute top-0 inset-x-0 h-0.5 bg-gradient-to-r ${card.accentClass} opacity-0 group-hover:opacity-100 transition-opacity`} />

              <div className="flex justify-between items-start mb-4">
                <div className={`p-2.5 rounded-xl bg-gradient-to-br ${card.accentClass} text-white shadow-md`}>
                  {card.icon}
                </div>
                <ArrowRight
                  size={18}
                  className="text-muted-foreground group-hover:text-accent group-hover:translate-x-1 transition-all"
                />
              </div>

              <h2 className="text-lg font-bold mb-1 flex items-center gap-2">
                {card.title}
                {card.badge && (
                  <span className="text-[10px] font-mono font-bold px-2 py-0.5 rounded-full bg-blue-500 text-white">
                    {card.badge}
                  </span>
                )}
              </h2>
              <p className="text-sm text-muted-foreground mb-4">
                {card.description}
              </p>
              <div className={`text-3xl font-mono font-bold ${card.color}`}>
                {card.count}
              </div>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
}
