import { A } from '@solidjs/router';
import AdminShell from '~/components/AdminShell';
import {
  Users, Building2, Briefcase, Clock, Ticket, Receipt,
  Package, Megaphone, Shield, UserCog, FormInput, LayoutDashboard,
  BadgeCheck, ChevronRight, TrendingUp,
} from 'lucide-solid';
import type { Component } from 'solid-js';

type KpiCard = {
  label: string;
  value: string;
  href: string;
  icon: Component<any>;
  bg: string;
  fg: string;
};

type ControlLink = {
  label: string;
  href: string;
  desc: string;
  icon: Component<any>;
  accent: string;
};

const KPI: KpiCard[] = [
  { label: 'Total Users',       value: '—', href: '/admin/users',    icon: Users,      bg: 'bg-blue-50',   fg: 'text-blue-600' },
  { label: 'Companies',         value: '—', href: '/admin/company',  icon: Building2,  bg: 'bg-violet-50', fg: 'text-violet-600' },
  { label: 'Open Jobs',         value: '—', href: '/admin/jobs',     icon: Briefcase,  bg: 'bg-amber-50',  fg: 'text-amber-600' },
  { label: 'Pending Approvals', value: '—', href: '/admin/approval', icon: Clock,      bg: 'bg-orange-50', fg: 'text-orange-600' },
  { label: 'Open Tickets',      value: '—', href: '/admin/support',  icon: Ticket,     bg: 'bg-rose-50',   fg: 'text-rose-600' },
  { label: 'Invoices',          value: '—', href: '/admin/invoice',  icon: Receipt,    bg: 'bg-teal-50',   fg: 'text-teal-600' },
  { label: 'Active Orders',     value: '—', href: '/admin/order',    icon: Package,    bg: 'bg-sky-50',    fg: 'text-sky-600' },
  { label: 'Active Leads',      value: '—', href: '/admin/leads',    icon: Megaphone,  bg: 'bg-pink-50',   fg: 'text-pink-600' },
];

const CONTROLS: ControlLink[] = [
  {
    label: 'Internal Roles',
    href: '/admin/roles',
    desc: 'Define permissions and access levels for internal staff roles.',
    icon: Shield,
    accent: 'bg-blue-50 text-blue-600',
  },
  {
    label: 'External Roles',
    href: '/admin/runtime-roles',
    desc: 'Configure modules, credit rules, and capabilities per external role.',
    icon: UserCog,
    accent: 'bg-violet-50 text-violet-600',
  },
  {
    label: 'Onboarding Flows',
    href: '/admin/onboarding-schemas',
    desc: 'Build schema-driven onboarding forms for each external role.',
    icon: FormInput,
    accent: 'bg-amber-50 text-amber-600',
  },
  {
    label: 'External Dashboards',
    href: '/admin/external-dashboard-management',
    desc: 'Configure the runtimeConfig, sidebar, and widgets per external role.',
    icon: LayoutDashboard,
    accent: 'bg-teal-50 text-teal-600',
  },
  {
    label: 'Internal Dashboards',
    href: '/admin/internal-dashboard-management',
    desc: 'Design home widgets and KPI panels for internal staff dashboards.',
    icon: LayoutDashboard,
    accent: 'bg-orange-50 text-orange-600',
  },
  {
    label: 'Approval Queue',
    href: '/admin/approval',
    desc: 'Review, approve, or reject pending platform action requests.',
    icon: BadgeCheck,
    accent: 'bg-rose-50 text-rose-600',
  },
];

export default function AdminDashboard() {
  return (
    <AdminShell>
      <div class="space-y-8">

        {/* ── Page header ── */}
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-[22px] font-bold tracking-tight text-gray-900">Platform Overview</h1>
            <p class="mt-0.5 text-sm text-gray-400">Real-time snapshot of the Nxtgauge platform.</p>
          </div>
          <div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-1.5 shadow-sm">
            <TrendingUp class="h-4 w-4 text-emerald-500" />
            <span class="text-xs font-medium text-gray-500">Live data</span>
          </div>
        </div>

        {/* ── KPI grid ── */}
        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
          {KPI.map((kpi) => {
            const Icon = kpi.icon;
            return (
              <A
                href={kpi.href}
                class="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-gray-200 hover:shadow-md"
              >
                {/* Subtle background circle */}
                <div class="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-gray-50 opacity-60" />

                <div class="relative flex flex-col gap-4">
                  {/* Icon */}
                  <div class={`flex h-10 w-10 items-center justify-center rounded-xl ${kpi.bg}`}>
                    <Icon class={`h-5 w-5 ${kpi.fg}`} />
                  </div>

                  {/* Metric */}
                  <div>
                    <p class="text-[28px] font-bold leading-none tracking-tight text-gray-900">{kpi.value}</p>
                    <p class="mt-1.5 text-[13px] font-medium text-gray-400">{kpi.label}</p>
                  </div>
                </div>

                {/* Hover arrow */}
                <ChevronRight class="absolute bottom-4 right-4 h-4 w-4 text-gray-300 opacity-0 transition-opacity group-hover:opacity-100" />
              </A>
            );
          })}
        </div>

        {/* ── Control Plane ── */}
        <div>
          <div class="mb-4 flex items-center justify-between">
            <h2 class="text-[15px] font-semibold text-gray-700">Control Plane</h2>
            <span class="rounded-full border border-gray-200 bg-white px-2.5 py-0.5 text-[11px] font-medium text-gray-400 shadow-sm">
              {CONTROLS.length} modules
            </span>
          </div>
          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {CONTROLS.map((item) => {
              const Icon = item.icon;
              return (
                <A
                  href={item.href}
                  class="group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-orange-100 hover:shadow-md"
                >
                  <div class={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${item.accent}`}>
                    <Icon class="h-4 w-4" />
                  </div>
                  <div class="min-w-0 flex-1">
                    <p class="text-[14px] font-semibold text-gray-800 group-hover:text-[#fd6216] transition-colors">{item.label}</p>
                    <p class="mt-0.5 text-[12px] leading-relaxed text-gray-400">{item.desc}</p>
                  </div>
                  <ChevronRight class="mt-1 h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-orange-400" />
                </A>
              );
            })}
          </div>
        </div>

      </div>
    </AdminShell>
  );
}