"use client"

import { AdminShell } from "@/components/admin/admin-shell"
import { useDataStore } from "@/lib/data-store"
import { FolderKanban, Layers, Terminal } from "lucide-react"
import Link from "next/link"

export default function AdminDashboard() {
  const { projects, stackCategories } = useDataStore()

  const stats = [
    {
      label: "Total Projects",
      value: projects.length,
      icon: FolderKanban,
      href: "/admin/projects",
    },
    {
      label: "Featured Projects",
      value: projects.filter((p) => p.featured).length,
      icon: FolderKanban,
      href: "/admin/projects",
    },
    {
      label: "Stack Categories",
      value: stackCategories.length,
      icon: Layers,
      href: "/admin/stack",
    },
    {
      label: "Total Tech Items",
      value: stackCategories.reduce((acc, cat) => acc + cat.items.length, 0),
      icon: Layers,
      href: "/admin/stack",
    },
  ]

  return (
    <AdminShell>
      <div className="p-8 space-y-8">
        {/* Header */}
        <div className="space-y-2">
          <h1 className="text-2xl font-semibold text-foreground">Dashboard</h1>
          <p className="text-sm text-muted-foreground font-mono">
            <Terminal size={12} className="inline mr-1" />$ atticl admin --status
          </p>
        </div>

        {/* Stats grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {stats.map((stat) => (
            <Link
              key={stat.label}
              href={stat.href}
              className="bg-card border border-border rounded-lg p-6 hover:border-primary/50 transition-colors group"
            >
              <div className="flex items-center justify-between">
                <stat.icon size={20} className="text-muted-foreground group-hover:text-primary transition-colors" />
                <span className="text-3xl font-semibold text-foreground">{stat.value}</span>
              </div>
              <p className="mt-2 text-sm font-mono text-muted-foreground">{stat.label}</p>
            </Link>
          ))}
        </div>

        {/* Quick actions */}
        <div className="space-y-4">
          <h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Quick Actions</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Link
              href="/admin/projects"
              className="bg-card border border-border rounded-lg p-4 hover:border-primary/50 transition-colors flex items-center gap-4"
            >
              <div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center">
                <FolderKanban size={18} className="text-primary" />
              </div>
              <div>
                <p className="font-medium text-foreground">Manage Projects</p>
                <p className="text-sm text-muted-foreground">Add, edit, or remove projects</p>
              </div>
            </Link>
            <Link
              href="/admin/stack"
              className="bg-card border border-border rounded-lg p-4 hover:border-primary/50 transition-colors flex items-center gap-4"
            >
              <div className="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center">
                <Layers size={18} className="text-primary" />
              </div>
              <div>
                <p className="font-medium text-foreground">Manage Tech Stack</p>
                <p className="text-sm text-muted-foreground">Update your technology categories</p>
              </div>
            </Link>
          </div>
        </div>

        {/* API placeholder */}
        <div className="bg-card border border-dashed border-border rounded-lg p-6">
          <div className="flex items-start gap-4">
            <div className="w-10 h-10 bg-secondary rounded-md flex items-center justify-center flex-shrink-0">
              <Terminal size={18} className="text-muted-foreground" />
            </div>
            <div className="space-y-2">
              <p className="font-medium text-foreground">API Integration</p>
              <p className="text-sm text-muted-foreground">
                Currently using mock data. Replace the data store functions with your API calls when ready.
              </p>
              <code className="text-xs font-mono text-primary bg-secondary px-2 py-1 rounded">lib/data-store.tsx</code>
            </div>
          </div>
        </div>
      </div>
    </AdminShell>
  )
}