/**
 * Admin Account Limits Page
 * Configure account limits and quotas
 */

import { useState } from 'react';
import { Save, Shield, Loader2 } from 'lucide-react';
import { Card } from '../../components/ui/card';

export default function AdminAccountLimitsPage() {
  const [saving, setSaving] = useState(false);
  const [limits, setLimits] = useState({
    maxSites: 10,
    maxTeamMembers: 5,
    maxStorageGB: 50,
    maxAPICallsPerMonth: 100000,
    maxConcurrentJobs: 10,
    rateLimitPerMinute: 100,
  });

  const handleSave = async () => {
    setSaving(true);
    await new Promise(resolve => setTimeout(resolve, 1000));
    setSaving(false);
  };

  return (
    <div className="p-6">
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <Shield className="w-6 h-6" />
            Account Limits
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Configure default account limits and quotas
          </p>
        </div>
        <button
          onClick={handleSave}
          disabled={saving}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
        >
          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
          {saving ? 'Saving...' : 'Save Changes'}
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="p-6">
          <h2 className="text-lg font-semibold mb-4">Resource Limits</h2>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Max Sites per Account
              </label>
              <input
                type="number"
                value={limits.maxSites}
                onChange={(e) => setLimits({ ...limits, maxSites: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Max Team Members
              </label>
              <input
                type="number"
                value={limits.maxTeamMembers}
                onChange={(e) => setLimits({ ...limits, maxTeamMembers: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Max Storage (GB)
              </label>
              <input
                type="number"
                value={limits.maxStorageGB}
                onChange={(e) => setLimits({ ...limits, maxStorageGB: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
              />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <h2 className="text-lg font-semibold mb-4">API & Performance Limits</h2>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Max API Calls per Month
              </label>
              <input
                type="number"
                value={limits.maxAPICallsPerMonth}
                onChange={(e) => setLimits({ ...limits, maxAPICallsPerMonth: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Max Concurrent Background Jobs
              </label>
              <input
                type="number"
                value={limits.maxConcurrentJobs}
                onChange={(e) => setLimits({ ...limits, maxConcurrentJobs: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Rate Limit (requests per minute)
              </label>
              <input
                type="number"
                value={limits.rateLimitPerMinute}
                onChange={(e) => setLimits({ ...limits, rateLimitPerMinute: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
              />
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}