'use client'

import type { RateLimitIP } from '../types'

interface IpListTabProps {
  ipList: RateLimitIP[]
  actionLoading: string | null
  newIP: string
  setNewIP: (v: string) => void
  newIPType: 'whitelist' | 'blacklist'
  setNewIPType: (v: 'whitelist' | 'blacklist') => void
  newIPReason: string
  setNewIPReason: (v: string) => void
  addIP: (e: React.FormEvent) => void
  removeIP: (id: string) => void
}

export function IpListTab({
  ipList,
  actionLoading,
  newIP,
  setNewIP,
  newIPType,
  setNewIPType,
  newIPReason,
  setNewIPReason,
  addIP,
  removeIP,
}: IpListTabProps) {
  return (
    <div>
      {/* Add IP Form */}
      <form onSubmit={addIP} className="mb-6 p-4 bg-slate-50 rounded-lg border border-slate-200">
        <h3 className="font-semibold text-slate-900 mb-4">IP hinzufuegen</h3>
        <div className="flex flex-wrap gap-3">
          <input
            type="text"
            value={newIP}
            onChange={e => setNewIP(e.target.value)}
            placeholder="IP-Adresse (z.B. 192.168.1.1)"
            className="flex-1 min-w-[200px] px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
          />
          <select
            value={newIPType}
            onChange={e => setNewIPType(e.target.value as 'whitelist' | 'blacklist')}
            className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
          >
            <option value="whitelist">Whitelist</option>
            <option value="blacklist">Blacklist</option>
          </select>
          <input
            type="text"
            value={newIPReason}
            onChange={e => setNewIPReason(e.target.value)}
            placeholder="Grund (optional)"
            className="flex-1 min-w-[150px] px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
          />
          <button
            type="submit"
            disabled={!newIP.trim() || actionLoading === 'add-ip'}
            className="px-6 py-2 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 disabled:opacity-50 transition-colors"
          >
            {actionLoading === 'add-ip' ? 'Hinzufuegen...' : 'Hinzufuegen'}
          </button>
        </div>
      </form>

      {/* IP List Table */}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b border-slate-200">
              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
                IP-Adresse
              </th>
              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
                Typ
              </th>
              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
                Grund
              </th>
              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
                Hinzugefuegt
              </th>
              <th className="text-right py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
                Aktion
              </th>
            </tr>
          </thead>
          <tbody>
            {ipList.length === 0 ? (
              <tr>
                <td colSpan={5} className="text-center py-8 text-slate-500">
                  Keine IP-Eintraege vorhanden.
                </td>
              </tr>
            ) : (
              ipList.map(ip => (
                <tr key={ip.id} className="border-b border-slate-100 hover:bg-slate-50">
                  <td className="py-3 px-4 font-mono text-sm">{ip.ip_address}</td>
                  <td className="py-3 px-4">
                    <span
                      className={`px-2 py-1 rounded text-xs font-semibold ${
                        ip.list_type === 'whitelist'
                          ? 'bg-green-100 text-green-800'
                          : 'bg-red-100 text-red-800'
                      }`}
                    >
                      {ip.list_type === 'whitelist' ? 'Whitelist' : 'Blacklist'}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-sm text-slate-600">{ip.reason || '-'}</td>
                  <td className="py-3 px-4 text-sm text-slate-500">
                    {new Date(ip.created_at).toLocaleString('de-DE')}
                  </td>
                  <td className="py-3 px-4 text-right">
                    <button
                      onClick={() => removeIP(ip.id)}
                      disabled={actionLoading === `remove-${ip.id}`}
                      className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded transition-colors disabled:opacity-50"
                    >
                      {actionLoading === `remove-${ip.id}` ? '...' : 'Entfernen'}
                    </button>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}
