import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { adminApi } from '../../api/admin';
import { AppLayout } from '../../components/layout/AppLayout';
import { StatCard } from '../../components/ui/StatCard';
import { NextMoveWidget } from '../../components/ui/NextMoveWidget';
import { PageLoader } from '../../components/ui/LoadingSpinner';
import { Building2, Users, TrendingUp, DollarSign, AlertTriangle } from 'lucide-react';
import type { DashboardStats } from '../../types';

export function AdminDashboard() {
  const { data, isLoading } = useQuery<DashboardStats>({
    queryKey: ['admin-overview'],
    queryFn: () => adminApi.getOverview(),
  });

  if (isLoading) {
    return (
      <AppLayout title="Admin Dashboard">
        <PageLoader />
      </AppLayout>
    );
  }

  return (
    <AppLayout title="Admin Dashboard">
      <div className="mb-6">
        <h1 className="text-xl sm:text-2xl font-bold text-surface-900">System Overview</h1>
        <p className="mt-1 text-sm text-surface-500">
          Platform-wide metrics and health status
        </p>
      </div>

      {/* Next Move — Smart Coaching */}
      <div className="mb-6">
        <NextMoveWidget coachingPath="/admin/coaching" />
      </div>

      {/* Stats Grid */}
      <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard
          title="Total Organizations"
          value={data?.totalOrganizations ?? 0}
          icon={Building2}
          iconBg="bg-brand-100 text-brand-600"
          href="/admin/organizations"
        />
        <StatCard
          title="Active Organizations"
          value={data?.totalActive ?? 0}
          icon={TrendingUp}
          iconBg="bg-success/10 text-success"
          change={`${data?.totalSuspended ?? 0} suspended`}
          changeType="neutral"
          href="/admin/organizations"
        />
        <StatCard
          title="Total Users"
          value={data?.totalUsers ?? 0}
          icon={Users}
          iconBg="bg-warning/10 text-warning"
          href="/admin/users"
        />
        <StatCard
          title="Total Revenue"
          value={`$${data?.totalRevenue?.toLocaleString() ?? 0}`}
          icon={DollarSign}
          iconBg="bg-brand-100 text-brand-600"
        />
      </div>

      {/* System Health */}
      {data?.systemHealth && (
        <div className="mb-8 rounded-xl border border-surface-200 bg-white p-5">
          <div className="mb-3 flex items-center gap-2">
            <AlertTriangle className="h-4 w-4 text-warning" />
            <h3 className="text-sm font-semibold text-surface-700">System Health</h3>
          </div>
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div>
              <p className="text-xs text-surface-500">Email Failures</p>
              <p className={`text-lg font-semibold ${data.systemHealth.emailFailures > 0 ? 'text-error' : 'text-success'}`}>
                {data.systemHealth.emailFailures}
              </p>
            </div>
            <div>
              <p className="text-xs text-surface-500">Integration Errors</p>
              <p className={`text-lg font-semibold ${data.systemHealth.integrationErrors > 0 ? 'text-error' : 'text-success'}`}>
                {data.systemHealth.integrationErrors}
              </p>
            </div>
            <div>
              <p className="text-xs text-surface-500">Active Alerts</p>
              <p className={`text-lg font-semibold ${data.systemHealth.activeAlerts > 0 ? 'text-error' : 'text-success'}`}>
                {data.systemHealth.activeAlerts}
              </p>
            </div>
            <div>
              <p className="text-xs text-surface-500">Last Sync</p>
              <p className="text-lg font-semibold text-surface-900">
                {data.systemHealth.lastSync ? new Date(data.systemHealth.lastSync).toLocaleDateString() : 'N/A'}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Recent Activity */}
      <div className="rounded-xl border border-surface-200 bg-white p-5">
        <h3 className="mb-3 text-sm font-semibold text-surface-700">Recent Activity</h3>
        {data?.recentActivity?.length === 0 ? (
          <p className="text-sm text-surface-500">No recent activity</p>
        ) : (
          <div className="space-y-3">
            {data?.recentActivity?.map((activity) => (
              <div key={activity.id} className="flex items-start gap-3 rounded-lg p-3 hover:bg-surface-50">
                <div className="mt-0.5 flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-brand-600">
                  <span className="text-xs">•</span>
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-surface-900">{activity.description}</p>
                  <p className="text-xs text-surface-500">
                    {activity.timestamp ? new Date(activity.timestamp).toLocaleString() : 'Recent'}
                    {' · '}
                    {activity.user_id || 'System'}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </AppLayout>
  );
}