import React, { useState } from 'react';

export default function ProjectDetail() {
  const [projectId, setProjectId] = useState('');
  const [project, setProject] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  const loadProject = async () => {
    if (!projectId) return;
    setLoading(true);
    try {
      const result = await window.mcp.callTool('wrike_get_project', { projectId });
      setProject(result.project);
    } catch (error) {
      console.error('Failed to load project:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Project Detail</h1>

      <div style={{ marginBottom: '24px', display: 'flex', gap: '12px' }}>
        <input
          type="text"
          placeholder="Enter Project ID"
          value={projectId}
          onChange={(e) => setProjectId(e.target.value)}
          style={{
            flex: 1,
            background: '#1f2937',
            color: '#f3f4f6',
            padding: '8px 12px',
            borderRadius: '6px',
            border: '1px solid #374151',
          }}
        />
        <button
          onClick={loadProject}
          style={{
            background: '#3b82f6',
            color: 'white',
            padding: '8px 16px',
            borderRadius: '6px',
            border: 'none',
            cursor: 'pointer',
          }}
        >
          Load Project
        </button>
      </div>

      {loading && <div>Loading...</div>}

      {project && (
        <div style={{ background: '#1f2937', padding: '24px', borderRadius: '8px', border: '1px solid #374151' }}>
          <h2 style={{ fontSize: '20px', fontWeight: '600', marginBottom: '16px' }}>{project.title}</h2>
          {project.description && (
            <p style={{ marginBottom: '16px', color: '#9ca3af' }}>{project.description}</p>
          )}
          {project.project && (
            <div style={{ display: 'grid', gap: '8px', fontSize: '14px' }}>
              <div><strong>Status:</strong> {project.project.status}</div>
              {project.project.startDate && (
                <div><strong>Start Date:</strong> {new Date(project.project.startDate).toLocaleDateString()}</div>
              )}
              {project.project.endDate && (
                <div><strong>End Date:</strong> {new Date(project.project.endDate).toLocaleDateString()}</div>
              )}
              <div><strong>Owners:</strong> {project.project.ownerIds?.length || 0} users</div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}
