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

export default function WorkflowEditor() {
  const [workflows, setWorkflows] = useState<any[]>([]);
  const [selectedWorkflow, setSelectedWorkflow] = useState<any>(null);
  const [loading, setLoading] = useState(true);

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

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

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Workflow Editor</h1>
      
      <button
        onClick={loadWorkflows}
        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', gridTemplateColumns: '1fr 2fr', gap: '24px' }}>
          <div>
            <h2 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '16px' }}>Workflows</h2>
            <div style={{ display: 'grid', gap: '8px' }}>
              {workflows.map(workflow => (
                <div
                  key={workflow.id}
                  onClick={() => setSelectedWorkflow(workflow)}
                  style={{
                    background: selectedWorkflow?.id === workflow.id ? '#3b82f6' : '#1f2937',
                    padding: '12px',
                    borderRadius: '6px',
                    cursor: 'pointer',
                    border: '1px solid #374151',
                  }}
                >
                  {workflow.name}
                  {workflow.standard && (
                    <span style={{ fontSize: '12px', marginLeft: '8px', color: '#9ca3af' }}>
                      (Standard)
                    </span>
                  )}
                </div>
              ))}
            </div>
          </div>

          <div>
            {selectedWorkflow ? (
              <div>
                <h2 style={{ fontSize: '20px', fontWeight: '600', marginBottom: '16px' }}>
                  {selectedWorkflow.name}
                </h2>
                <div style={{ marginBottom: '16px', color: '#9ca3af' }}>
                  <div>Standard: {selectedWorkflow.standard ? 'Yes' : 'No'}</div>
                  <div>Hidden: {selectedWorkflow.hidden ? 'Yes' : 'No'}</div>
                </div>
                <h3 style={{ fontSize: '16px', fontWeight: '600', marginBottom: '12px' }}>
                  Custom Statuses
                </h3>
                <div style={{ display: 'grid', gap: '8px' }}>
                  {selectedWorkflow.customStatuses?.map((status: any) => (
                    <div
                      key={status.id}
                      style={{
                        background: '#1f2937',
                        padding: '12px',
                        borderRadius: '6px',
                        border: '1px solid #374151',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                      }}
                    >
                      <div>
                        <div style={{ fontWeight: '600' }}>{status.name}</div>
                        <div style={{ fontSize: '12px', color: '#9ca3af' }}>{status.group}</div>
                      </div>
                      <div
                        style={{
                          width: '30px',
                          height: '30px',
                          borderRadius: '4px',
                          background: status.color,
                        }}
                      />
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <div style={{ textAlign: 'center', padding: '48px', color: '#6b7280' }}>
                Select a workflow to view details
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
