'use client'

import type { MiddlewareHookReturn } from './types'

interface RateLimitingTabProps {
  hook: MiddlewareHookReturn
}

export default function RateLimitingTab({ hook }: RateLimitingTabProps) {
  const { saving, ipList, newIP, setNewIP } = hook

  return (
    <div className="space-y-6">
      {/* Rate Limit Config */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-medium mb-4">Rate Limit Settings</h3>
        {(() => {
          const config = hook.getConfig('rate_limiter')
          if (!config) return <p>Loading...</p>
          return (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">IP Limit (req/min)</label>
                <input
                  type="number"
                  value={config.config.ip_limit || 100}
                  onChange={(e) => {
                    const newConfig = { ...config.config, ip_limit: parseInt(e.target.value) }
                    hook.updateConfig('rate_limiter', newConfig)
                  }}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">User Limit (req/min)</label>
                <input
                  type="number"
                  value={config.config.user_limit || 500}
                  onChange={(e) => {
                    const newConfig = { ...config.config, user_limit: parseInt(e.target.value) }
                    hook.updateConfig('rate_limiter', newConfig)
                  }}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Auth Limit (req/min)</label>
                <input
                  type="number"
                  value={config.config.auth_limit || 20}
                  onChange={(e) => {
                    const newConfig = { ...config.config, auth_limit: parseInt(e.target.value) }
                    hook.updateConfig('rate_limiter', newConfig)
                  }}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
              </div>
            </div>
          )
        })()}
      </div>

      {/* IP Whitelist/Blacklist */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-medium mb-4">IP Whitelist / Blacklist</h3>

        {/* Add IP Form */}
        <div className="flex gap-2 mb-4">
          <input
            type="text"
            placeholder="IP Address (e.g., 192.168.1.1)"
            value={newIP.ip_address}
            onChange={(e) => setNewIP({ ...newIP, ip_address: e.target.value })}
            className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
          <select
            value={newIP.list_type}
            onChange={(e) => setNewIP({ ...newIP, list_type: e.target.value as 'whitelist' | 'blacklist' })}
            className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          >
            <option value="whitelist">Whitelist</option>
            <option value="blacklist">Blacklist</option>
          </select>
          <input
            type="text"
            placeholder="Reason (optional)"
            value={newIP.reason}
            onChange={(e) => setNewIP({ ...newIP, reason: e.target.value })}
            className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
          <button
            onClick={hook.addIP}
            disabled={saving || !newIP.ip_address}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
          >
            Add
          </button>
        </div>

        {/* IP List Table */}
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP Address</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Reason</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
              <th className="px-4 py-2"></th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {ipList.length === 0 ? (
              <tr>
                <td colSpan={5} className="px-4 py-4 text-center text-gray-500">
                  No IPs in whitelist/blacklist
                </td>
              </tr>
            ) : (
              ipList.map((ip) => (
                <tr key={ip.id}>
                  <td className="px-4 py-2 font-mono text-sm">{ip.ip_address}</td>
                  <td className="px-4 py-2">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      ip.list_type === 'whitelist' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                    }`}>
                      {ip.list_type}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-sm text-gray-500">{ip.reason || '-'}</td>
                  <td className="px-4 py-2 text-sm text-gray-500">
                    {new Date(ip.created_at).toLocaleDateString()}
                  </td>
                  <td className="px-4 py-2">
                    <button
                      onClick={() => hook.removeIP(ip.id)}
                      disabled={saving}
                      className="text-red-600 hover:text-red-800"
                    >
                      Remove
                    </button>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}