/**
 * Admin whitelist management page.
 *
 * ⚠️ AUTO-GENERATED BY PRISM (GENERATE_ONCE)
 */

import { useEffect, useState } from 'react';
import { adminApi, type WhitelistRule } from '../../lib/adminApi';

export default function AdminWhitelist() {
  const [rules, setRules] = useState<WhitelistRule[]>([]);
  const [error, setError] = useState('');
  const [ruleType, setRuleType] = useState<'email' | 'domain' | 'pattern'>('email');
  const [value, setValue] = useState('');

  const refresh = () =>
    adminApi.listWhitelist().then(setRules).catch((e) => setError(e.message));

  useEffect(() => { refresh(); }, []);

  const handleAdd = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!value.trim()) return;
    try {
      await adminApi.addWhitelistRule(ruleType, value.trim());
      setValue('');
      await refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    }
  };

  const handleDelete = async (id: number) => {
    try {
      await adminApi.deleteWhitelistRule(id);
      await refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    }
  };

  return (
    <div>
      <h1 className="text-2xl font-bold text-nordic-900 mb-6">Signup Whitelist</h1>
      {error && <p className="text-red-600 mb-4">{error}</p>}

      <form onSubmit={handleAdd} className="flex gap-2 mb-6">
        <select
          value={ruleType}
          onChange={(e) => setRuleType(e.target.value as 'email' | 'domain' | 'pattern')}
          className="border border-nordic-300 rounded px-3 py-2 text-sm"
        >
          <option value="email">Email</option>
          <option value="domain">Domain</option>
          <option value="pattern">Pattern</option>
        </select>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="e.g. user@example.com"
          className="flex-1 border border-nordic-300 rounded px-3 py-2 text-sm"
        />
        <button
          type="submit"
          className="px-4 py-2 bg-nordic-900 text-white rounded text-sm hover:bg-nordic-800"
        >
          Add
        </button>
      </form>

      <div className="bg-white rounded-lg border border-nordic-200 overflow-hidden">
        <table className="min-w-full divide-y divide-nordic-200">
          <thead className="bg-nordic-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-nordic-500 uppercase">Type</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-nordic-500 uppercase">Value</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-nordic-500 uppercase">Created By</th>
              <th className="px-4 py-3"></th>
            </tr>
          </thead>
          <tbody className="divide-y divide-nordic-100">
            {rules.map((r) => (
              <tr key={r.id}>
                <td className="px-4 py-3 text-sm text-nordic-700">{r.rule_type}</td>
                <td className="px-4 py-3 text-sm text-nordic-900 font-mono">{r.value}</td>
                <td className="px-4 py-3 text-sm text-nordic-600">{r.created_by || '-'}</td>
                <td className="px-4 py-3 text-sm text-right">
                  <button
                    onClick={() => handleDelete(r.id)}
                    className="text-red-600 hover:text-red-800"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
            {rules.length === 0 && (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-sm text-nordic-400">
                  No whitelist rules configured.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}
