import { useEffect, useState } from 'react';
import { api } from '../api';
import type { Approval } from '../types';

export default function Approvals({ onOpenTask }: { onOpenTask: (id: string) => void }) {
  const [approvals, setApprovals] = useState<Approval[]>([]);

  async function load() {
    setApprovals(await api.listApprovals('pending'));
  }

  useEffect(() => {
    load();
    const interval = setInterval(load, 5000);
    return () => clearInterval(interval);
  }, []);

  async function decide(id: string, decision: 'approved' | 'rejected') {
    await api.resolveApproval(id, decision);
    load();
  }

  return (
    <div>
      <h2>بانتظار الموافقة / Pending Approvals</h2>
      {approvals.length === 0 && <p style={{ color: '#9aa1ad' }}>لا يوجد طلبات موافقة الآن / Nothing pending right now.</p>}
      {approvals.map((a) => (
        <div className="approval-card" key={a.id}>
          <p><strong>الإجراء المطلوب / Action:</strong> {a.action_description}</p>
          <p><strong>سبب الحساسية / Why it's sensitive:</strong> {a.risk_reason}</p>
          <p style={{ fontSize: 12, color: '#9aa1ad' }}>
            المهمة / Task: <a className="back" href="#" onClick={(e) => { e.preventDefault(); onOpenTask(a.task_id); }}>{a.task_id}</a>
          </p>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="primary" onClick={() => decide(a.id, 'approved')}>موافقة / Approve</button>
            <button className="danger" onClick={() => decide(a.id, 'rejected')}>رفض / Reject</button>
          </div>
        </div>
      ))}
    </div>
  );
}