import type { Metadata } from "next";
import Link from "next/link";
import { ShoppingBag, Users, DollarSign, TrendingUp, BookOpen, Briefcase, GraduationCap, ArrowRight, ArrowUpRight, Plane } from "lucide-react";

export const metadata: Metadata = { title: "Admin" };

const stats = [
  { label: "Total Revenue", value: "$48,290", change: "+12% this month", icon: DollarSign, positive: true },
  { label: "Active Subscribers", value: "1,284", change: "+89 this month", icon: Users, positive: true },
  { label: "Orders", value: "327", change: "+14 this week", icon: ShoppingBag, positive: true },
  { label: "Jobs Synced", value: "2,401", change: "Last synced 2h ago", icon: TrendingUp, positive: true },
];

const recentOrders = [
  { id: "#ORD-2041", customer: "Ahmad Razif", amount: "$268.00", status: "paid", date: "May 31" },
  { id: "#ORD-2040", customer: "Sarah Lee", amount: "$89.00", status: "shipped", date: "May 30" },
  { id: "#ORD-2039", customer: "David Tan", amount: "$499.00", status: "paid", date: "May 30" },
  { id: "#ORD-2038", customer: "Nurul Aina", amount: "$59.00", status: "pending", date: "May 29" },
];

const statusColors: Record<string, string> = {
  paid: "bg-emerald-100 text-emerald-700",
  shipped: "bg-blue-100 text-blue-700",
  pending: "bg-amber-100 text-amber-700",
  refunded: "bg-red-100 text-red-700",
};

export default function AdminPage() {
  return (
    <div className="p-8">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-neutral-900">Overview</h1>
        <p className="text-neutral-500 text-sm mt-0.5">Welcome back. Here is what is happening today.</p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        {stats.map(({ label, value, change, icon: Icon, positive }) => (
          <div key={label} className="bg-white rounded-2xl border border-neutral-200 p-5">
            <div className="flex items-center justify-between mb-4">
              <div className="w-10 h-10 bg-navy-50 rounded-xl flex items-center justify-center">
                <Icon size={18} className="text-navy-700" />
              </div>
              <ArrowUpRight size={14} className={positive ? "text-emerald-500" : "text-red-500"} />
            </div>
            <div className="text-2xl font-bold text-neutral-900">{value}</div>
            <div className="text-sm text-neutral-500 mt-0.5">{label}</div>
            <div className="text-xs text-emerald-600 font-medium mt-2">{change}</div>
          </div>
        ))}
      </div>

      <div className="grid lg:grid-cols-3 gap-6">
        {/* Recent orders */}
        <div className="lg:col-span-2 bg-white rounded-2xl border border-neutral-200 p-6">
          <div className="flex items-center justify-between mb-5">
            <h2 className="font-semibold text-neutral-900">Recent Orders</h2>
            <Link href="/admin/ecommerce" className="text-xs text-navy-700 hover:text-navy-900 font-medium flex items-center gap-1">View all <ArrowRight size={12} /></Link>
          </div>
          <table className="w-full text-sm">
            <thead>
              <tr className="text-xs text-neutral-400 uppercase border-b border-neutral-200">
                <th className="text-left pb-3">Order</th>
                <th className="text-left pb-3">Customer</th>
                <th className="text-left pb-3">Amount</th>
                <th className="text-left pb-3">Status</th>
                <th className="text-left pb-3">Date</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-neutral-100">
              {recentOrders.map((o) => (
                <tr key={o.id} className="hover:bg-neutral-50 transition-colors">
                  <td className="py-3 font-medium text-navy-800">{o.id}</td>
                  <td className="py-3 text-neutral-600">{o.customer}</td>
                  <td className="py-3 font-semibold text-neutral-900">{o.amount}</td>
                  <td className="py-3"><span className={`px-2.5 py-1 rounded-full text-xs font-medium ${statusColors[o.status]}`}>{o.status}</span></td>
                  <td className="py-3 text-neutral-400">{o.date}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Quick links */}
        <div className="bg-white rounded-2xl border border-neutral-200 p-6">
          <h2 className="font-semibold text-neutral-900 mb-5">Quick Actions</h2>
          <div className="space-y-2">
            {[
              { label: "Add New Product", href: "/admin/ecommerce", icon: ShoppingBag },
              { label: "Moderate Journals", href: "/admin/journals", icon: BookOpen },
              { label: "Add Scholarship", href: "/admin/scholarships", icon: GraduationCap },
              { label: "Sync Jobs API", href: "/admin/jobs", icon: Briefcase },
              { label: "Manage Visa CRM", href: "/admin/visa", icon: Plane },
              { label: "View Subscribers", href: "/admin/subscriptions", icon: Users },
            ].map(({ label, href, icon: Icon }) => (
              <Link key={label} href={href} className="flex items-center gap-3 p-3 rounded-xl hover:bg-neutral-50 text-sm font-medium text-neutral-700 hover:text-navy-700 transition-colors group">
                <div className="w-8 h-8 bg-neutral-100 rounded-lg flex items-center justify-center group-hover:bg-navy-50">
                  <Icon size={15} className="group-hover:text-navy-700" />
                </div>
                {label}
                <ArrowRight size={13} className="ml-auto text-neutral-300 group-hover:text-navy-700" />
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}