/**
 * Admin API Monitor Page
 * Monitor API usage and performance
 */

import { useState } from 'react';
import { Activity, TrendingUp, Clock, AlertTriangle } from 'lucide-react';
import { Card } from '../../components/ui/card';

export default function AdminAPIMonitorPage() {
  const stats = {
    totalRequests: 125430,
    requestsPerMinute: 42,
    avgResponseTime: 234,
    errorRate: 0.12,
  };

  const topEndpoints = [
    { path: '/v1/billing/credit-balance/', requests: 15234, avgTime: 145 },
    { path: '/v1/sites/', requests: 12543, avgTime: 234 },
    { path: '/v1/ideas/', requests: 10234, avgTime: 456 },
    { path: '/v1/account/settings/', requests: 8234, avgTime: 123 },
  ];

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          <Activity className="w-6 h-6" />
          API Monitor
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Monitor API usage and performance
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <Card className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-lg">
              <TrendingUp className="w-6 h-6 text-blue-600" />
            </div>
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">
                {stats.totalRequests.toLocaleString()}
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Total Requests</div>
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-green-100 dark:bg-green-900/20 rounded-lg">
              <Activity className="w-6 h-6 text-green-600" />
            </div>
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">
                {stats.requestsPerMinute}
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Requests/Min</div>
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-lg">
              <Clock className="w-6 h-6 text-purple-600" />
            </div>
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">
                {stats.avgResponseTime}ms
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Avg Response</div>
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center gap-4">
            <div className="p-3 bg-red-100 dark:bg-red-900/20 rounded-lg">
              <AlertTriangle className="w-6 h-6 text-red-600" />
            </div>
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">
                {stats.errorRate}%
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400">Error Rate</div>
            </div>
          </div>
        </Card>
      </div>

      <Card className="p-6">
        <h2 className="text-lg font-semibold mb-4">Top Endpoints</h2>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="border-b border-gray-200 dark:border-gray-700">
              <tr>
                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Endpoint</th>
                <th className="px-4 py-3 text-right text-sm font-medium text-gray-500">Requests</th>
                <th className="px-4 py-3 text-right text-sm font-medium text-gray-500">Avg Time</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
              {topEndpoints.map((endpoint) => (
                <tr key={endpoint.path} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                  <td className="px-4 py-3 font-mono text-sm">{endpoint.path}</td>
                  <td className="px-4 py-3 text-right">{endpoint.requests.toLocaleString()}</td>
                  <td className="px-4 py-3 text-right">{endpoint.avgTime}ms</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}
