import React, { useState } from 'react';

export default function TimeEntries() {
  const [taskId, setTaskId] = useState('');
  const [hours, setHours] = useState('');
  const [trackedDate, setTrackedDate] = useState(new Date().toISOString().split('T')[0]);
  const [comment, setComment] = useState('');
  const [loading, setLoading] = useState(false);

  const createTimelog = async () => {
    if (!taskId || !hours) return;
    setLoading(true);
    try {
      await window.mcp.callTool('wrike_create_timelog', {
        taskId,
        hours: parseFloat(hours),
        trackedDate,
        comment,
      });
      alert('Timelog created successfully');
      setHours('');
      setComment('');
    } catch (error) {
      console.error('Failed to create timelog:', error);
      alert('Failed to create timelog');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Time Entries</h1>
      
      <div style={{ background: '#1f2937', padding: '24px', borderRadius: '8px', border: '1px solid #374151', maxWidth: '500px' }}>
        <div style={{ display: 'grid', gap: '16px' }}>
          <input
            type="text"
            placeholder="Task ID"
            value={taskId}
            onChange={(e) => setTaskId(e.target.value)}
            style={{
              background: '#111827',
              color: '#f3f4f6',
              padding: '8px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
            }}
          />
          <input
            type="number"
            step="0.5"
            placeholder="Hours"
            value={hours}
            onChange={(e) => setHours(e.target.value)}
            style={{
              background: '#111827',
              color: '#f3f4f6',
              padding: '8px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
            }}
          />
          <input
            type="date"
            value={trackedDate}
            onChange={(e) => setTrackedDate(e.target.value)}
            style={{
              background: '#111827',
              color: '#f3f4f6',
              padding: '8px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
            }}
          />
          <textarea
            placeholder="Comment (optional)"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            rows={3}
            style={{
              background: '#111827',
              color: '#f3f4f6',
              padding: '8px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
            }}
          />
          <button
            onClick={createTimelog}
            disabled={loading || !taskId || !hours}
            style={{
              background: '#10b981',
              color: 'white',
              padding: '10px 16px',
              borderRadius: '6px',
              border: 'none',
              cursor: 'pointer',
              opacity: loading || !taskId || !hours ? 0.5 : 1,
            }}
          >
            {loading ? 'Creating...' : 'Create Timelog'}
          </button>
        </div>
      </div>
    </div>
  );
}
