import { useEffect, useState } from 'react';
import { Check, X, Clock, Sparkles } from 'lucide-react';
import { kbStore } from '../../lib/kbStore';
import Button from '../ui/Button';

/**
 * Admin sub-panel inside the Knowledge Graph view. Shows pending R42 chatbot
 * suggestions with approve / reject controls.
 */
export default function SuggestionsQueue({ onApplied }) {
  const [pending, setPending] = useState([]);

  const refresh = () => setPending(kbStore.listSuggestions('pending'));

  useEffect(() => {
    refresh();
    const onChange = () => refresh();
    window.addEventListener('respellion:kb-updated', onChange);
    return () => window.removeEventListener('respellion:kb-updated', onChange);
  }, []);

  if (pending.length === 0) {
    return (
      <div className="text-xs text-fg-muted flex items-center gap-2">
        <Sparkles size={14} /> Geen openstaande voorstellen van R42.
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="text-xs text-fg-muted uppercase tracking-wider font-mono flex items-center gap-2">
        <Sparkles size={14} /> R42-voorstellen ({pending.length})
      </div>
      {pending.map(s => (
        <div key={s.id} className="bg-bg rounded-[var(--r-sm)] border border-bg-warm p-3 text-sm">
          <div className="flex items-center justify-between mb-2">
            <div className="text-xs text-fg-muted flex items-center gap-2">
              <Clock size={12} />
              {new Date(s.ts).toLocaleString()}
              {s.proposedByName && <> · door {s.proposedByName}</>}
            </div>
          </div>
          {s.reason && <p className="mb-2 text-fg">{s.reason}</p>}
          {(s.topics?.length > 0 || s.relations?.length > 0) && (
            <ul className="text-xs space-y-1 mb-3">
              {s.topics?.map(t => (
                <li key={`t-${t.id}`}>
                  <strong>{t.label}</strong>{' '}
                  <span className="text-fg-muted">({t.type})</span>
                  {t.description && <> — {t.description}</>}
                </li>
              ))}
              {s.relations?.map((r, i) => (
                <li key={`r-${i}`}>
                  <code className="text-teal">{r.source}</code>{' → '}
                  <span className="text-fg-muted">{r.type}</span>{' → '}
                  <code className="text-teal">{r.target}</code>
                </li>
              ))}
            </ul>
          )}
          <div className="flex gap-2">
            <Button
              onClick={async () => {
                await kbStore.approveSuggestion(s.id);
                refresh();
                onApplied?.();
              }}
              className="text-xs py-1 px-3 flex items-center gap-1"
            >
              <Check size={14} /> Goedkeuren
            </Button>
            <Button
              variant="outline"
              onClick={() => {
                kbStore.rejectSuggestion(s.id);
                refresh();
              }}
              className="text-xs py-1 px-3 flex items-center gap-1"
            >
              <X size={14} /> Afwijzen
            </Button>
          </div>
        </div>
      ))}
    </div>
  );
}