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

const Tasks = () => {
  const [tasks, setTasks] = useState([]);
  const [uploading, setUploading] = useState(false);

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

  const fetchTasks = async () => {
    const res = await axios.get('/tasks?myTasks=true');
    setTasks(res.data.tasks);
  };

  const handleFileUpload = async (taskId, file) => {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('description', 'Proof of work submitted');

    setUploading(true);
    try {
      await axios.post(`/tasks/${taskId}/upload`, formData);
      await axios.put(`/tasks/${taskId}/progress`, { progress: 100, status: 'completed' });
      alert('Proof uploaded and task sent for approval!');
      fetchTasks();
    } catch (err) {
      alert('Upload failed. Check file size (Max 10MB).');
    } finally {
      setUploading(false);
    }
  };

  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Initiative</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deadline</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {tasks.map((task) => (
            <tr key={task.id}>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">{task.title}</td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 text-xs rounded-full ${task.status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
                  {task.status.replace('_', ' ')}
                </span>
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{new Date(task.due_date).toLocaleDateString()}</td>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                {task.status !== 'completed' && (
                  <label className="cursor-pointer text-blue-600 hover:text-blue-900">
                    {uploading ? 'Processing...' : 'Upload Proof'}
                    <input type="file" className="hidden" onChange={(e) => handleFileUpload(task.id, e.target.files[0])} />
                  </label>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Tasks;