import { useQuery } from '@tanstack/react-query';
import api from '../services/api';
import { Key, Network, Factory, Activity } from 'lucide-react';

interface StatusData {
  status: string;
  stats: {
    apiKeys: { total: number; active: number };
    endpoints: { total: number; active: number };
    factories: { total: number; active: number };
  };
}

export default function Dashboard() {
  const { data, isLoading } = useQuery<StatusData>({
    queryKey: ['admin-status'],
    queryFn: async () => {
      const response = await api.get('/api/v1/admin/status');
      return response.data;
    },
    refetchInterval: 30000,
  });

  if (isLoading) {
    return <div className="text-center py-12">Loading...</div>;
  }

  const stats = [
    {
      name: 'API Keys',
      value: data?.stats.apiKeys.active || 0,
      total: data?.stats.apiKeys.total || 0,
      icon: Key,
      color: 'bg-blue-500',
    },
    {
      name: 'Endpoints',
      value: data?.stats.endpoints.active || 0,
      total: data?.stats.endpoints.total || 0,
      icon: Network,
      color: 'bg-green-500',
    },
    {
      name: 'DEX Factories',
      value: data?.stats.factories.active || 0,
      total: data?.stats.factories.total || 0,
      icon: Factory,
      color: 'bg-purple-500',
    },
  ];

  return (
    <div className="px-4 py-6 sm:px-0">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
        <p className="mt-2 text-sm text-gray-600">Service status and statistics</p>
      </div>
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-3 mb-8">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <div key={stat.name} className="bg-white overflow-hidden shadow rounded-lg">
              <div className="p-5">
                <div className="flex items-center">
                  <div className={`flex-shrink-0 ${stat.color} rounded-md p-3`}>
                    <Icon className="h-6 w-6 text-white" />
                  </div>
                  <div className="ml-5 w-0 flex-1">
                    <dl>
                      <dt className="text-sm font-medium text-gray-500 truncate">{stat.name}</dt>
                      <dd className="flex items-baseline">
                        <div className="text-2xl font-semibold text-gray-900">{stat.value}</div>
                        <div className="ml-2 text-sm text-gray-500">of {stat.total}</div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className="bg-white shadow rounded-lg">
        <div className="px-4 py-5 sm:p-6">
          <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Service Status</h3>
          <div className="flex items-center">
            <Activity
              className={`h-5 w-5 mr-2 ${
                data?.status === 'operational' ? 'text-green-500' : 'text-red-500'
              }`}
            />
            <span className="text-sm font-medium text-gray-900">
              Status: {data?.status || 'Unknown'}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
