import { useQuery } from '@tanstack/react-query'
import { Link } from 'react-router-dom'
import {
  Building2, Users, FileClock,
  CheckCircle2, AlertCircle, Activity, Inbox, ShieldCheck,
  CreditCard, TrendingUp, AlertTriangle, UserPlus,
} from 'lucide-react'
import { api } from '@/lib/api'
import { cn } from '@/lib/utils'

interface DashboardStats {
  totalOrgs: number; activeOrgs: number; archivedOrgs: number
  totalUsers: number; activeUsers: number
  registrationsLast30Days: number
}

interface AuditRow {
  id: string; createdAt: string; actionType: string
  organizationName: string | null; description: string | null
}

const fmt = new Intl.NumberFormat('ru')

function Kpi({ icon: Icon, label, value, hint, accent = 'indigo', muted = false }: {
  icon: React.ComponentType<{ className?: string }>
  label: string; value: string | number; hint?: string
  accent?: 'indigo' | 'emerald' | 'amber' | 'sky' | 'rose' | 'violet'
  /** «Скоро» — заглушка под будущий биллинг. Тонировка фона сильнее,
   * но иконка остаётся цветной чтобы было ясно «здесь будет данные». */
  muted?: boolean
}) {
  const accents: Record<string, string> = {
    indigo: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-300',
    emerald: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-300',
    amber: 'bg-amber-100 text-amber-600 dark:bg-amber-900/40 dark:text-amber-300',
    sky: 'bg-sky-100 text-sky-600 dark:bg-sky-900/40 dark:text-sky-300',
    rose: 'bg-rose-100 text-rose-600 dark:bg-rose-900/40 dark:text-rose-300',
    violet: 'bg-violet-100 text-violet-600 dark:bg-violet-900/40 dark:text-violet-300',
  }
  return (
    <div className={cn(
      'rounded-xl border bg-white dark:bg-slate-900 p-4 transition hover:shadow-sm',
      muted
        ? 'border-slate-200/70 dark:border-slate-800/70 bg-slate-50/60 dark:bg-slate-900/60'
        : 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700',
    )}>
      <div className="flex items-start gap-3">
        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${accents[accent]}`}>
          <Icon className="w-5 h-5" />
        </div>
        <div className="min-w-0">
          <div className="text-[11px] uppercase tracking-wide text-slate-500">{label}</div>
          <div className={cn('text-2xl font-bold mt-0.5 leading-tight', muted && 'text-slate-400')}>{value}</div>
          {hint && <div className="text-xs text-slate-400 mt-0.5">{hint}</div>}
        </div>
      </div>
    </div>
  )
}

function HealthRow({ label, ok, hint }: { label: string; ok: boolean | 'unknown'; hint?: string }) {
  return (
    <li className="flex items-center justify-between py-1.5 text-sm">
      <div className="flex items-center gap-2 min-w-0">
        {ok === true && <CheckCircle2 className="w-4 h-4 text-emerald-500" />}
        {ok === false && <AlertCircle className="w-4 h-4 text-red-500" />}
        {ok === 'unknown' && <Activity className="w-4 h-4 text-slate-400" />}
        <span className="truncate">{label}</span>
      </div>
      {hint && <span className="text-xs text-slate-400">{hint}</span>}
    </li>
  )
}

export function SuperAdminDashboardPage() {
  const { data } = useQuery({
    queryKey: ['/api/super-admin/dashboard'],
    queryFn: async () => (await api.get<DashboardStats>('/api/super-admin/dashboard')).data,
  })
  const audit = useQuery({
    queryKey: ['/api/super-admin/audit-log', 'recent'],
    queryFn: async () => (await api.get<{ items: AuditRow[] }>('/api/super-admin/audit-log?pageSize=10')).data.items,
  })
  const orgsTop = useQuery({
    queryKey: ['/api/super-admin/organizations', 'top'],
    queryFn: async () => (await api.get<{ items: Array<{ id: string; name: string; productCount: number; employeeCount: number; lastLoginAt: string | null }> }>(
      '/api/super-admin/organizations?pageSize=3&archived=false')).data.items,
  })

  return (
    <div className="h-full overflow-auto">
      <div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-5">
        {/* Hero */}
        <section className="relative rounded-xl overflow-hidden bg-gradient-to-br from-indigo-600 to-indigo-800 text-white p-6 sm:p-8">
          <div className="flex items-start justify-between gap-4">
            <div>
              <div className="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-wider bg-white/15 px-2 py-0.5 rounded-full mb-2">
                <ShieldCheck className="w-3.5 h-3.5" /> Super Admin Console
              </div>
              <h1 className="text-2xl sm:text-3xl font-bold leading-tight">Системная консоль</h1>
              <p className="text-sm text-indigo-100/85 mt-1.5 max-w-xl">
                Управление всеми организациями, аудит действий, состояние системы.
                Tenant-данные доступны через «Открыть организацию» в верхней панели.
              </p>
            </div>
            <div className="hidden sm:flex flex-col items-end text-xs text-indigo-100/70">
              <span className="font-mono">stage</span>
              <span className="font-mono opacity-70">build {new Date().toISOString().slice(0, 10)}</span>
            </div>
          </div>
        </section>

        {/* KPI: SaaS-владелец платформы. Главный ряд — клиентская база
          * и биллинг (последние 3 — заглушки до Phase 4 «Подписки»).
          * Второй ряд — инфраструктура учёток. Операционные метрики
          * магазинов (товары/приёмки) выкинуты — это для tenant-дашборда. */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
          <Kpi icon={Building2} label="Организаций" value={fmt.format(data?.totalOrgs ?? 0)}
            hint={`${data?.activeOrgs ?? 0} активных, ${data?.archivedOrgs ?? 0} в архиве`} accent="indigo" />
          <Kpi icon={CreditCard} label="Платящих клиентов" value="—"
            hint="Скоро · после внедрения биллинга" accent="emerald" muted />
          <Kpi icon={TrendingUp} label="MRR (₸ / мес)" value="—"
            hint="Скоро · после внедрения биллинга" accent="violet" muted />
          <Kpi icon={AlertTriangle} label="Должники" value="—"
            hint="Скоро · после внедрения биллинга" accent="rose" muted />
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4">
          <Kpi icon={Users} label="Пользователей" value={fmt.format(data?.activeUsers ?? 0)}
            hint={data && data.totalUsers > data.activeUsers
              ? `+${data.totalUsers - data.activeUsers} деактивированных`
              : 'все активны'}
            accent="sky" />
          <Kpi icon={UserPlus} label="Регистраций за 30 дней" value={fmt.format(data?.registrationsLast30Days ?? 0)}
            hint="Новые организации" accent="amber" />
        </div>

        {/* Three side-by-side blocks */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4">
          {/* Здоровье — пока заглушки, реальные проверки в следующей итерации */}
          <section className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Activity className="w-4 h-4 text-emerald-600" /> Здоровье системы
            </h3>
            <ul className="divide-y divide-slate-100 dark:divide-slate-800">
              <HealthRow label="API" ok={true} hint="200" />
              <HealthRow label="База данных" ok={true} hint="connected" />
              <HealthRow label="Telegram bridge" ok={'unknown'} hint="—" />
              <HealthRow label="Последний бэкап" ok={'unknown'} hint="скоро" />
            </ul>
          </section>

          {/* Топ организации по объёму */}
          <section className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-semibold flex items-center gap-2">
                <Building2 className="w-4 h-4 text-indigo-600" /> Активные организации
              </h3>
              <Link to="/super-admin/organizations" className="text-xs text-indigo-600 hover:underline">все →</Link>
            </div>
            {orgsTop.data?.length === 0 ? (
              <div className="text-sm text-slate-400">Нет организаций.</div>
            ) : (
              <ul className="divide-y divide-slate-100 dark:divide-slate-800">
                {orgsTop.data?.map((o) => (
                  <li key={o.id} className="py-2">
                    <div className="flex items-baseline justify-between gap-2">
                      <span className="font-medium truncate">{o.name}</span>
                      <span className="text-xs text-slate-400 flex-shrink-0">
                        {fmt.format(o.productCount)} товаров
                      </span>
                    </div>
                    <div className="text-xs text-slate-500">
                      {fmt.format(o.employeeCount)} сотр.
                      {o.lastLoginAt && <> · last login {new Date(o.lastLoginAt).toLocaleDateString('ru')}</>}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>

          {/* Свежие события */}
          <section className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-semibold flex items-center gap-2">
                <FileClock className="w-4 h-4 text-amber-600" /> Свежие события
              </h3>
              <Link to="/super-admin/audit-log" className="text-xs text-indigo-600 hover:underline">журнал →</Link>
            </div>
            {audit.data?.length === 0 ? (
              <div className="text-sm text-slate-400 flex flex-col items-center gap-2 py-6 text-center">
                <Inbox className="w-8 h-8 text-slate-300" />
                <span>Журнал действий пуст. Здесь появятся события: создание орг, входы как, архивация.</span>
              </div>
            ) : (
              <ul className="divide-y divide-slate-100 dark:divide-slate-800">
                {audit.data?.slice(0, 6).map((r) => (
                  <li key={r.id} className="py-2 text-sm">
                    <div className="flex items-baseline justify-between gap-2">
                      <span className="text-xs font-mono text-slate-500">{r.actionType}</span>
                      <span className="text-xs text-slate-400">{new Date(r.createdAt).toLocaleString('ru', { dateStyle: 'short', timeStyle: 'short' })}</span>
                    </div>
                    <div className="text-slate-700 dark:text-slate-300 truncate">
                      {r.organizationName && <span className="font-medium mr-1">«{r.organizationName}»</span>}
                      <span className="text-slate-500">{r.description}</span>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </div>
      </div>
    </div>
  )
}
