"use client";

import { useState, useEffect } from "react";
import {
  Wrench,
  FolderKanban,
  Cpu,
  GraduationCap,
  Users,
  MessageSquare,
  TrendingUp,
  Clock,
  FileEdit,
  Newspaper,
  Globe,
} from "lucide-react";
import Link from "next/link";
import { getDashboardCounts, type DashboardCounts } from "@/services/dashboard";

// `stats` will be computed inside the component from live counts

const quickLinks = [
  { label: "Edit Services", href: "/admin/services", icon: Wrench },
  { label: "Edit Projects", href: "/admin/projects", icon: FolderKanban },
  { label: "Edit Technologies", href: "/admin/technologies", icon: Cpu },
  { label: "Edit Training", href: "/admin/training", icon: GraduationCap },
  { label: "Manage Clients", href: "/admin/clients", icon: Users },
  { label: "Manage News", href: "/admin/news", icon: Newspaper },
  { label: "View Quote Requests", href: "/admin/quotes", icon: MessageSquare },
  { label: "Manage Pages", href: "/admin/pages", icon: Globe },
  { label: "Manage Inspectors", href: "/admin/inspectors", icon: Users },
  { label: "Inspection Quotes", href: "/admin/inspection-quotes", icon: FileEdit },
  { label: "Contact Submissions", href: "/admin/contact", icon: MessageSquare },
];

export default function DashboardPage() {
  const [counts, setCounts] = useState<DashboardCounts | null>(null);
  const [loadingCounts, setLoadingCounts] = useState(true);

  useEffect(() => {
    let mounted = true;
    getDashboardCounts()
      .then((res) => {
        if (!mounted) return;
        setCounts(res.counts ?? null);
      })
      .catch(() => {
        if (!mounted) return;
        setCounts(null);
      })
      .finally(() => {
        if (!mounted) return;
        setLoadingCounts(false);
      });
    return () => {
      mounted = false;
    };
  }, []);

  const stats = [
    { label: "Services", value: String(counts?.services ?? 0), icon: Wrench, href: "/admin/services", color: "text-blue-500" },
    { label: "Projects", value: String(counts?.projects ?? 0), icon: FolderKanban, href: "/admin/projects", color: "text-green-500" },
    { label: "Technologies", value: String(counts?.technologies ?? 0), icon: Cpu, href: "/admin/technologies", color: "text-purple-500" },
    { label: "Training Programmes", value: String(counts?.training ?? 0), icon: GraduationCap, href: "/admin/training", color: "text-orange-500" },
    { label: "Clients", value: String(counts?.clients ?? 0), icon: Users, href: "/admin/clients", color: "text-cyan-500" },
    { label: "News Articles", value: String(counts?.news ?? 0), icon: Newspaper, href: "/admin/news", color: "text-amber-500" },
    { label: "Quote Requests", value: String(counts?.quote_requests ?? 0), icon: MessageSquare, href: "/admin/quotes", color: "text-rose-500" },
    { label: "Pages", value: String(counts?.pages ?? 0), icon: Globe, href: "/admin/pages", color: "text-indigo-500" },
    { label: "Inspectors", value: String(counts?.inspectors ?? 0), icon: Users, href: "/admin/inspectors", color: "text-rose-500" },
    { label: "Inspection Quotes", value: String(counts?.inspection_quotes ?? 0), icon: FileEdit, href: "/admin/inspection-quotes", color: "text-sky-500" },
    { label: "Contacts", value: String(counts?.contacts ?? 0), icon: MessageSquare, href: "/admin/contact", color: "text-teal-500" },
  ];
  return (
    <div className="p-6 lg:p-8 max-w-7xl mx-auto space-y-8">
      {/* Page header */}
      <div>
        <h1 className="text-2xl font-bold text-foreground tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground text-sm mt-1">
          Welcome back. Here&apos;s an overview of your site content.
        </p>
      </div>

      {/* Stats grid */}
      <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
        {stats.map((stat) => (
          <Link
            key={stat.label}
            href={stat.href}
            className="group flex flex-col gap-3 bg-card border border-border rounded-lg p-5 hover:border-accent/40 hover:shadow-sm transition-all"
          >
            <div className="flex items-center justify-between">
              <stat.icon className={`h-5 w-5 ${stat.color}`} />
              <TrendingUp className="h-3 w-3 text-muted-foreground/40 group-hover:text-accent transition-colors" />
            </div>
            <div>
              <p className="text-2xl font-bold text-foreground">{stat.value}</p>
              <p className="text-xs text-muted-foreground mt-0.5">{stat.label}</p>
            </div>
          </Link>
        ))}
      </div>

      {/* Content area */}
      <div className="grid md:grid-cols-2 gap-6">
        {/* Quick links */}
        <div className="bg-card border border-border rounded-lg p-6">
          <div className="flex items-center gap-2 mb-5">
            <FileEdit className="h-4 w-4 text-accent" />
            <h2 className="text-sm font-bold text-foreground uppercase tracking-wider">
              Quick Actions
            </h2>
          </div>
          <div className="space-y-2">
            {quickLinks.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="flex items-center gap-3 px-3 py-2.5 rounded-sm text-sm text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors group"
              >
                <link.icon className="h-4 w-4 text-muted-foreground/60 group-hover:text-accent transition-colors" />
                <span>{link.label}</span>
              </Link>
            ))}
          </div>
        </div>

        {/* Recent activity placeholder */}
        {/* <div className="bg-card border border-border rounded-lg p-6">
          <div className="flex items-center gap-2 mb-5">
            <Clock className="h-4 w-4 text-accent" />
            <h2 className="text-sm font-bold text-foreground uppercase tracking-wider">
              Recent Activity
            </h2>
          </div>
          <div className="space-y-4">
            {[
              { action: "Service page updated", time: "2 hours ago", section: "Services" },
              { action: "New quote request received", time: "5 hours ago", section: "Quotes" },
              { action: "Project case study added", time: "1 day ago", section: "Projects" },
              { action: "Training programme updated", time: "2 days ago", section: "Training" },
            ].map((item, i) => (
              <div key={i} className="flex items-start gap-3 text-sm">
                <div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-foreground font-medium">{item.action}</p>
                  <p className="text-muted-foreground text-xs mt-0.5">
                    {item.section} &middot; {item.time}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div> */}
      </div>
    </div>
  );
}