import React, { useState, useEffect } from 'react';

export default function ApprovalManager() {
  const [approvals, setApprovals] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

  const loadApprovals = async () => {
    setLoading(true);
    try {
      const result = await window.mcp.callTool('wrike_list_approvals', {});
      setApprovals(result.approvals || []);
    } catch (error) {
      console.error('Failed to load approvals:', error);
    } finally {
      setLoading(false);
    }
  };

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      Pending: '#f59e0b',
      Approved: '#10b981',
      Rejected: '#ef4444',
      Cancelled: '#6b7280',
    };
    return colors[status] || '#6b7280';
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Approval Manager</h1>
      
      <button
        onClick={loadApprovals}
        style={{
          background: '#3b82f6',
          color: 'white',
          padding: '8px 16px',
          borderRadius: '6px',
          border: 'none',
          cursor: 'pointer',
          marginBottom: '24px',
        }}
      >
        Refresh
      </button>

      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ display: 'grid', gap: '16px' }}>
          {approvals.map(approval => (
            <div
              key={approval.id}
              style={{
                background: '#1f2937',
                padding: '16px',
                borderRadius: '8px',
                border: '1px solid #374151',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
                <h3 style={{ fontSize: '18px', fontWeight: '600' }}>{approval.title}</h3>
                <span
                  style={{
                    padding: '4px 12px',
                    borderRadius: '4px',
                    background: getStatusColor(approval.status) + '20',
                    color: getStatusColor(approval.status),
                    fontSize: '14px',
                  }}
                >
                  {approval.status}
                </span>
              </div>
              {approval.description && (
                <div style={{ marginBottom: '12px', color: '#9ca3af' }}>{approval.description}</div>
              )}
              {approval.dueDate && (
                <div style={{ fontSize: '14px', color: '#9ca3af' }}>
                  Due: {new Date(approval.dueDate).toLocaleDateString()}
                </div>
              )}
              <div style={{ marginTop: '12px', fontSize: '14px' }}>
                <strong>Decisions:</strong> {approval.decisions?.length || 0} approvers
              </div>
            </div>
          ))}
          {approvals.length === 0 && (
            <div style={{ textAlign: 'center', padding: '48px', color: '#6b7280' }}>
              No approvals found
            </div>
          )}
        </div>
      )}
    </div>
  );
}
