import {
  AlertTriangle,
  Package,
  ShoppingCart,
  TrendingUp,
  Users,
} from "lucide-react";
import { db } from "@/db";
import { brands, categories, orders, products } from "@/db/schema";
import { count, eq, lt } from "drizzle-orm";

export const dynamic = "force-dynamic";

export default async function AdminDashboard() {
  const [[productCount], [orderCount], [categoryCount], [brandCount], [lowStockCount]] =
    await Promise.all([
      db.select({ value: count() }).from(products),
      db.select({ value: count() }).from(orders),
      db.select({ value: count() }).from(categories),
      db.select({ value: count() }).from(brands),
      db.select({ value: count() }).from(products).where(lt(products.stock, 5)),
    ]);

  const stats = [
    { label: "Toplam Ürün", value: productCount?.value ?? 0, icon: Package, color: "bg-blue-500" },
    { label: "Toplam Sipariş", value: orderCount?.value ?? 0, icon: ShoppingCart, color: "bg-emerald-500" },
    { label: "Kategoriler", value: categoryCount?.value ?? 0, icon: TrendingUp, color: "bg-violet-500" },
    { label: "Markalar", value: brandCount?.value ?? 0, icon: Users, color: "bg-sky-500" },
    { label: "Stok Uyarısı", value: lowStockCount?.value ?? 0, icon: AlertTriangle, color: "bg-amber-500" },
  ];

  return (
    <div>
      <h2 className="text-2xl font-extrabold text-ink">Hoş Geldin, Admin! 🐾</h2>
      <p className="mt-1 text-sm font-semibold text-mocha">
        PetMarketim.net mağazanı buradan yönetebilirsin.
      </p>

      <div className="mt-8 grid gap-5 sm:grid-cols-2 xl:grid-cols-5">
        {stats.map((s) => (
          <div
            key={s.label}
            className="flex items-center gap-4 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200"
          >
            <span
              className={`grid size-12 place-items-center rounded-xl text-white shadow-md ${s.color}`}
            >
              <s.icon className="size-6" />
            </span>
            <div>
              <p className="text-xs font-bold uppercase tracking-wider text-mocha">{s.label}</p>
              <p className="mt-0.5 text-3xl font-extrabold text-ink">{s.value}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-10 grid gap-6 lg:grid-cols-2">
        <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
          <h3 className="font-display text-lg font-extrabold text-ink">Hızlı İşlemler</h3>
          <div className="mt-4 grid grid-cols-2 gap-3">
            {[
              { label: "Ürün Ekle", href: "/admin/urunler", emoji: "📦" },
              { label: "Sipariş Gör", href: "/admin/siparisler", emoji: "🛒" },
              { label: "XML Aktar", href: "/admin/xml", emoji: "📄" },
              { label: "WhatsApp Ayarla", href: "/admin/whatsapp", emoji: "💬" },
            ].map((a) => (
              <a
                key={a.label}
                href={a.href}
                className="flex items-center gap-3 rounded-xl border-2 border-slate-200 p-4 text-sm font-extrabold text-ink transition-all hover:-translate-y-0.5 hover:border-brand-400 hover:bg-brand-50"
              >
                <span className="text-2xl">{a.emoji}</span>
                {a.label}
              </a>
            ))}
          </div>
        </div>

        <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
          <h3 className="font-display text-lg font-extrabold text-ink">Sistem Bilgisi</h3>
          <dl className="mt-4 space-y-3 text-sm">
            {[
              { label: "Site Adresi", value: "petmarketim.net" },
              { label: "Veritabanı", value: "PostgreSQL + Drizzle ORM" },
              { label: "Ödeme Altyapısı", value: "Iyzico + PayTR" },
              { label: "XML Desteği", value: "Aktif" },
              { label: "WhatsApp Widget", value: "Aktif" },
            ].map((row) => (
              <div
                key={row.label}
                className="flex items-center justify-between border-b border-dashed border-slate-200 pb-2 last:border-0"
              >
                <dt className="font-bold text-mocha">{row.label}</dt>
                <dd className="font-extrabold text-ink">{row.value}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </div>
  );
}