'use client';

import { useState } from 'react';

interface RuleData {
  id: string;
  matchType: 'HASHTAG' | 'PREFIX' | 'REACTION_EMOJI';
  matchValue: string;
  action: 'FLAG' | 'AUTO_APPROVE' | 'SKIP' | 'REJECT';
  priority: number;
  isActive: boolean;
  createdAt: string;
  updatedAt: string;
}

const MATCH_TYPE_LABELS: Record<string, string> = {
  HASHTAG: 'Hashtag',
  PREFIX: 'Prefix',
  REACTION_EMOJI: 'Reaction Emoji',
};

const ACTION_LABELS: Record<string, string> = {
  FLAG: 'Flag (Pending)',
  AUTO_APPROVE: 'Auto-approve',
  SKIP: 'Skip (Silent Drop)',
  REJECT: 'Reject (Visible)',
};

export function RuleManager({ initial }: { initial: RuleData[] }) {
  const [rules, setRules] = useState<RuleData[]>(initial);
  const [matchType, setMatchType] = useState<'HASHTAG' | 'PREFIX' | 'REACTION_EMOJI'>('HASHTAG');
  const [matchValue, setMatchValue] = useState('');
  const [action, setAction] = useState<'FLAG' | 'AUTO_APPROVE' | 'SKIP' | 'REJECT'>('FLAG');
  const [priority, setPriority] = useState(0);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  async function addRule() {
    if (!matchValue.trim()) return;
    setBusy(true);
    setError('');
    try {
      const res = await fetch('/api/rules', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ matchType, matchValue: matchValue.trim(), action, priority }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ message: 'Failed to create rule' }));
        setError(err.message ?? 'Failed to create rule');
        return;
      }
      const created: RuleData = await res.json();
      setRules((prev) => [...prev, created].sort((a, b) => a.priority - b.priority));
      setMatchValue('');
      setAction('FLAG');
      setPriority(0);
    } finally {
      setBusy(false);
    }
  }

  async function toggleRule(rule: RuleData) {
    const res = await fetch(`/api/rules/${rule.id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ isActive: !rule.isActive }),
    });
    if (res.ok) {
      const updated: RuleData = await res.json();
      setRules((prev) => prev.map((r) => (r.id === rule.id ? updated : r)));
    }
  }

  async function deleteRule(id: string) {
    const res = await fetch(`/api/rules/${id}`, { method: 'DELETE' });
    if (res.ok) setRules((prev) => prev.filter((r) => r.id !== id));
  }

  return (
    <div className="flex flex-col gap-6">
      <section className="border border-gray-200 rounded-lg p-4">
        <h2 className="text-base font-semibold mb-3">Add Rule</h2>
        <div className="flex flex-wrap items-end gap-3">
          <div className="flex flex-col gap-1">
            <label className="text-xs text-gray-500">Type</label>
            <select
              value={matchType}
              onChange={(e) => setMatchType(e.target.value as any)}
              className="border border-gray-300 rounded px-3 py-2 text-sm"
            >
              <option value="HASHTAG">Hashtag</option>
              <option value="PREFIX">Prefix</option>
              <option value="REACTION_EMOJI">Reaction Emoji</option>
            </select>
          </div>
          <div className="flex flex-col gap-1">
            <label className="text-xs text-gray-500">Value</label>
            <input
              value={matchValue}
              onChange={(e) => setMatchValue(e.target.value)}
              placeholder={matchType === 'REACTION_EMOJI' ? '⭐' : '#important'}
              className="border border-gray-300 rounded px-3 py-2 text-sm w-40"
            />
          </div>
          <div className="flex flex-col gap-1">
            <label className="text-xs text-gray-500">Action</label>
            <select
              value={action}
              onChange={(e) => setAction(e.target.value as any)}
              className="border border-gray-300 rounded px-3 py-2 text-sm"
            >
              <option value="FLAG">Flag (Pending)</option>
              <option value="AUTO_APPROVE">Auto-approve</option>
              <option value="SKIP">Skip (Silent Drop)</option>
              <option value="REJECT">Reject (Visible)</option>
            </select>
          </div>
          <div className="flex flex-col gap-1">
            <label className="text-xs text-gray-500">Priority</label>
            <input
              type="number"
              value={priority}
              onChange={(e) => setPriority(Number(e.target.value))}
              className="border border-gray-300 rounded px-3 py-2 text-sm w-20"
            />
          </div>
          <button
            type="button"
            onClick={() => void addRule()}
            disabled={busy || !matchValue.trim()}
            className="bg-blue-600 text-white rounded px-4 py-2 text-sm hover:bg-blue-700 disabled:opacity-40"
          >
            {busy ? 'Adding...' : 'Add Rule'}
          </button>
        </div>
        {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
      </section>

      <section>
        <h2 className="text-base font-semibold mb-3">Active Rules</h2>
        {rules.length === 0 ? (
          <p className="text-sm text-gray-400">No rules configured. Messages without matching rules are ignored.</p>
        ) : (
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200 text-left text-gray-500">
                <th className="pb-2 pr-3">Type</th>
                <th className="pb-2 pr-3">Value</th>
                <th className="pb-2 pr-3">Action</th>
                <th className="pb-2 pr-3">Priority</th>
                <th className="pb-2 pr-3">Active</th>
                <th className="pb-2" />
              </tr>
            </thead>
            <tbody>
              {rules.map((rule) => (
                <tr key={rule.id} className="border-b border-gray-100">
                  <td className="py-2 pr-3">{MATCH_TYPE_LABELS[rule.matchType] ?? rule.matchType}</td>
                  <td className="py-2 pr-3 font-mono">{rule.matchValue}</td>
                  <td className="py-2 pr-3">{ACTION_LABELS[rule.action] ?? rule.action}</td>
                  <td className="py-2 pr-3">{rule.priority}</td>
                  <td className="py-2 pr-3">
                    <button
                      type="button"
                      onClick={() => void toggleRule(rule)}
                      className={`text-xs rounded px-2 py-0.5 ${rule.isActive ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500'}`}
                    >
                      {rule.isActive ? 'ON' : 'OFF'}
                    </button>
                  </td>
                  <td className="py-2">
                    <button
                      type="button"
                      onClick={() => void deleteRule(rule.id)}
                      className="text-red-600 hover:text-red-800 text-xs"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </div>
  );
}