import Link from "next/link";
import { db } from "@/lib/db";
import { AdminPageHeader } from "@/components/admin/page-header";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Wrench, FolderKanban, Inbox, FileText, Star, HelpCircle, Users, Image as ImageIcon,
  ArrowUpRight, Mail, Phone, MessageSquare, Clock, TrendingUp,
} from "lucide-react";

export const dynamic = "force-dynamic";

export default async function AdminDashboard() {
  const [services, projects, leads, posts, testimonials, faqs, team, media, newLeads] = await Promise.all([
    db.service.count(),
    db.project.count(),
    db.lead.count(),
    db.blogPost.count(),
    db.testimonial.count(),
    db.faq.count(),
    db.teamMember.count(),
    db.mediaItem.count(),
    db.lead.findMany({ where: { status: "NEW" }, orderBy: { createdAt: "desc" }, take: 5 }),
  ]);

  const stats = [
    { label: "Services", value: services, icon: Wrench, href: "/admin/services", color: "bg-blue-500/10 text-blue-600" },
    { label: "Projects", value: projects, icon: FolderKanban, href: "/admin/projects", color: "bg-emerald-500/10 text-emerald-600" },
    { label: "New Leads", value: leads, icon: Inbox, href: "/admin/leads", color: "bg-amber-500/10 text-amber-600" },
    { label: "Blog Posts", value: posts, icon: FileText, href: "/admin/blog", color: "bg-purple-500/10 text-purple-600" },
    { label: "Testimonials", value: testimonials, icon: Star, href: "/admin/testimonials", color: "bg-rose-500/10 text-rose-600" },
    { label: "FAQs", value: faqs, icon: HelpCircle, href: "/admin/faq", color: "bg-cyan-500/10 text-cyan-600" },
    { label: "Team Members", value: team, icon: Users, href: "/admin/team", color: "bg-indigo-500/10 text-indigo-600" },
    { label: "Media Files", value: media, icon: ImageIcon, href: "/admin/media", color: "bg-teal-500/10 text-teal-600" },
  ];

  return (
    <>
      <AdminPageHeader title="Dashboard" description="Overview of your AHE Services website.">
        <Button asChild className="brand-gradient text-white">
          <Link href="/admin/leads"><Inbox className="size-4 mr-1.5" /> View Leads</Link>
        </Button>
      </AdminPageHeader>

      {/* Stats grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        {stats.map((s) => (
          <Link key={s.label} href={s.href}>
            <Card className="p-5 rounded-2xl hover:shadow-soft transition-shadow h-full">
              <div className="flex items-center justify-between">
                <div className={`grid place-items-center size-10 rounded-xl ${s.color}`}>
                  <s.icon className="size-5" />
                </div>
                <ArrowUpRight className="size-4 text-muted-foreground/40" />
              </div>
              <div className="mt-3 text-3xl font-extrabold text-foreground">{s.value}</div>
              <div className="text-sm text-muted-foreground">{s.label}</div>
            </Card>
          </Link>
        ))}
      </div>

      <div className="grid lg:grid-cols-3 gap-6">
        {/* Recent leads */}
        <Card className="lg:col-span-2 p-6 rounded-2xl">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-bold text-lg flex items-center gap-2">
              <Mail className="size-5 text-[var(--brand-royal)]" /> Recent Leads
            </h2>
            <Link href="/admin/leads" className="text-sm font-semibold text-[var(--brand-royal)] hover:underline">View all</Link>
          </div>
          {newLeads.length === 0 ? (
            <div className="text-center py-10 text-muted-foreground text-sm">No new leads yet.</div>
          ) : (
            <div className="space-y-3">
              {newLeads.map((lead) => (
                <Link key={lead.id} href="/admin/leads" className="block p-3 rounded-xl hover:bg-accent transition-colors border border-border/60">
                  <div className="flex items-center justify-between gap-3">
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        <span className="font-semibold text-sm truncate">{lead.name}</span>
                        <span className="px-1.5 py-0.5 rounded text-[10px] font-bold bg-[var(--brand-royal)]/10 text-[var(--brand-royal)]">{lead.type}</span>
                      </div>
                      <div className="text-xs text-muted-foreground truncate mt-0.5">{lead.message}</div>
                      <div className="flex items-center gap-3 mt-1.5 text-[11px] text-muted-foreground">
                        <span className="flex items-center gap-1"><Phone className="size-3" />{lead.phone}</span>
                        <span className="flex items-center gap-1"><Clock className="size-3" />{new Date(lead.createdAt).toLocaleDateString()}</span>
                      </div>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </Card>

        {/* Quick actions */}
        <Card className="p-6 rounded-2xl">
          <h2 className="font-bold text-lg flex items-center gap-2 mb-4">
            <TrendingUp className="size-5 text-[var(--brand-royal)]" /> Quick Actions
          </h2>
          <div className="space-y-2">
            {[
              { label: "Add New Service", href: "/admin/services/new", icon: Wrench },
              { label: "Add New Project", href: "/admin/projects/new", icon: FolderKanban },
              { label: "Write Blog Post", href: "/admin/blog/new", icon: FileText },
              { label: "Add Testimonial", href: "/admin/testimonials/new", icon: Star },
              { label: "Upload Media", href: "/admin/media", icon: ImageIcon },
              { label: "Edit Settings", href: "/admin/settings", icon: MessageSquare },
            ].map((a) => (
              <Link key={a.label} href={a.href} className="flex items-center justify-between p-3 rounded-xl hover:bg-accent transition-colors group">
                <span className="flex items-center gap-2.5 text-sm font-medium">
                  <a.icon className="size-4 text-muted-foreground group-hover:text-[var(--brand-royal)]" />
                  {a.label}
                </span>
                <ArrowUpRight className="size-4 text-muted-foreground/40 group-hover:text-[var(--brand-royal)]" />
              </Link>
            ))}
          </div>
        </Card>
      </div>
    </>
  );
}