'use client';

import { useEffect, useState } from 'react';
import { AdminShell } from '@/components/AdminShell';
import { getPolicies, togglePolicy, replaySignal, PolicyInfo } from '@/lib/api';

const VALID_SUBJECTS = ['signals.tip.served', 'signals.tip.feedback', 'signals.task.synced'];

export default function OpsPage() {
  const [policies, setPolicies] = useState<PolicyInfo[]>([]);
  const [replaySubject, setReplaySubject] = useState(VALID_SUBJECTS[0]);
  const [replayPayload, setReplayPayload] = useState('{\n  "userId": "",\n  "tipId": ""\n}');
  const [msg, setMsg] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    getPolicies().then((r) => setPolicies(r.policies)).catch(() => {});
  }, []);

  const handleToggle = async (name: string, active: boolean) => {
    try {
      await togglePolicy(name, active);
      setPolicies((prev) => prev.map((p) => p.name === name ? { ...p, active } : p));
      setMsg(`Policy "${name}" ${active ? 'enabled' : 'disabled'}.`);
    } catch (e: any) {
      setError(e.message);
    }
  };

  const handleReplay = async () => {
    let payload: Record<string, unknown>;
    try {
      payload = JSON.parse(replayPayload);
    } catch {
      setError('Invalid JSON payload');
      return;
    }
    try {
      await replaySignal(replaySubject, payload);
      setMsg(`Signal replayed: ${replaySubject}`);
      setError('');
    } catch (e: any) {
      setError(e.message);
    }
  };

  return (
    <AdminShell>
      <div className="space-y-8">
        <h1 className="text-xl font-semibold">Ops actions</h1>
        {msg && <p className="text-green-400 text-sm">{msg}</p>}
        {error && <p className="text-red-400 text-sm">{error}</p>}

        {/* Policy toggles */}
        <section className="space-y-3">
          <h2 className="text-base font-medium text-gray-300">Policies</h2>
          {policies.length === 0 ? (
            <p className="text-gray-500 text-sm">No shadow policies registered. Shadow policies can be added to the recommender source.</p>
          ) : (
            <div className="space-y-2">
              {policies.map((p) => (
                <div key={p.name} className="flex items-center justify-between bg-gray-900 border border-gray-800 rounded p-3">
                  <span className="text-sm text-gray-300 font-mono">{p.name}</span>
                  <button
                    onClick={() => handleToggle(p.name, !p.active)}
                    className={`px-3 py-1 rounded text-xs ${p.active ? 'bg-green-800 text-green-200' : 'bg-gray-800 text-gray-400'}`}
                  >
                    {p.active ? 'Active' : 'Disabled'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </section>

        {/* Replay signal */}
        <section className="space-y-3">
          <h2 className="text-base font-medium text-gray-300">Replay signal</h2>
          <p className="text-sm text-gray-500">Re-emit a past event on the in-process bus. Useful for backfill and testing.</p>
          <div className="space-y-2">
            <select
              value={replaySubject}
              onChange={(e) => setReplaySubject(e.target.value)}
              className="bg-gray-900 border border-gray-700 rounded px-3 py-1.5 text-sm text-gray-300 w-full max-w-sm"
            >
              {VALID_SUBJECTS.map((s) => <option key={s} value={s}>{s}</option>)}
            </select>
            <textarea
              value={replayPayload}
              onChange={(e) => setReplayPayload(e.target.value)}
              rows={6}
              className="w-full max-w-xl bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm font-mono text-gray-300"
            />
            <button
              onClick={handleReplay}
              className="bg-indigo-600 hover:bg-indigo-500 text-white rounded px-4 py-1.5 text-sm"
            >
              Replay
            </button>
          </div>
        </section>

        {/* User-level ops */}
        <section className="space-y-3">
          <h2 className="text-base font-medium text-gray-300">User-level actions</h2>
          <p className="text-sm text-gray-500">
            Revoke integration tokens and reset bandit state are available on the{' '}
            <a href="/users" className="text-indigo-400 hover:underline">Users page</a> — navigate to a user detail view.
          </p>
        </section>
      </div>
    </AdminShell>
  );
}