import { useState, useEffect } from 'react';
import './TaskPanel.css';

const TaskPanel = ({ turtles, apiUrl }) => {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all'); // all, pending, in_progress, completed, failed
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState(null);

  // Form state
  const [taskType, setTaskType] = useState('mine_area');
  const [priority, setPriority] = useState(5);
  const [assignedTurtleId, setAssignedTurtleId] = useState('');
  const [parameters, setParameters] = useState({
    x1: '', y1: '', z1: '',
    x2: '', y2: '', z2: ''
  });

  const taskTypes = [
    { value: 'mine_area', label: '⛏️ Mine Area', icon: '⛏️' },
    { value: 'explore', label: '🔍 Explore', icon: '🔍' },
    { value: 'gather', label: '📦 Gather Resources', icon: '📦' },
    { value: 'build', label: '🏗️ Build Structure', icon: '🏗️' },
    { value: 'transport', label: '🚚 Transport Items', icon: '🚚' },
    { value: 'clear_area', label: '🧹 Clear Area', icon: '🧹' },
  ];

  useEffect(() => {
    loadTasks();
    
    // Refresh tasks every 10 seconds
    const interval = setInterval(loadTasks, 10000);
    return () => clearInterval(interval);
  }, [filter]);

  const loadTasks = async () => {
    setLoading(true);
    try {
      const url = filter === 'all' 
        ? `${apiUrl}/api/tasks`
        : `${apiUrl}/api/tasks?status=${filter}`;
      
      const response = await fetch(url);
      if (response.ok) {
        const data = await response.json();
        // Server returns flat array of formatted tasks
        setTasks(Array.isArray(data) ? data : (data.tasks || []));
      }
    } catch (error) {
      console.error('Failed to load tasks:', error);
    } finally {
      setLoading(false);
    }
  };

  const createTask = async (e) => {
    e.preventDefault();
    
    // Validate coordinates
    const coords = ['x1', 'y1', 'z1', 'x2', 'y2', 'z2'];
    const hasCoords = coords.some(key => parameters[key] !== '');
    
    if (hasCoords && !coords.every(key => parameters[key] !== '')) {
      showMessage('Please fill all coordinates or leave them empty', 'error');
      return;
    }

    const taskData = {
      taskType,
      priority: parseInt(priority),
      assignedTurtleId: assignedTurtleId ? parseInt(assignedTurtleId) : null,
      parameters: hasCoords ? {
        x1: parseInt(parameters.x1),
        y1: parseInt(parameters.y1),
        z1: parseInt(parameters.z1),
        x2: parseInt(parameters.x2),
        y2: parseInt(parameters.y2),
        z2: parseInt(parameters.z2)
      } : {}
    };

    try {
      const response = await fetch(`${apiUrl}/api/tasks`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(taskData)
      });

      if (response.ok) {
        showMessage('Task created successfully!', 'success');
        setShowCreateForm(false);
        resetForm();
        loadTasks();
      } else {
        showMessage('Failed to create task', 'error');
      }
    } catch (error) {
      showMessage('Error creating task', 'error');
    }
  };

  const updateTaskStatus = async (taskId, status, result = null) => {
    try {
      const response = await fetch(`${apiUrl}/api/tasks/${taskId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status, result })
      });

      if (response.ok) {
        showMessage('Task updated', 'success');
        loadTasks();
      } else {
        showMessage('Failed to update task', 'error');
      }
    } catch (error) {
      showMessage('Error updating task', 'error');
    }
  };

  const deleteTask = async (taskId) => {
    if (!confirm('Are you sure you want to delete this task?')) return;

    try {
      const response = await fetch(`${apiUrl}/api/tasks/${taskId}`, {
        method: 'DELETE'
      });

      if (response.ok) {
        showMessage('Task deleted', 'success');
        loadTasks();
      } else {
        showMessage('Failed to delete task', 'error');
      }
    } catch (error) {
      showMessage('Error deleting task', 'error');
    }
  };

  const resetForm = () => {
    setTaskType('mine_area');
    setPriority(5);
    setAssignedTurtleId('');
    setParameters({ x1: '', y1: '', z1: '', x2: '', y2: '', z2: '' });
  };

  const showMessage = (text, type) => {
    setMessage({ text, type });
    setTimeout(() => setMessage(null), 3000);
  };

  const getTaskIcon = (type) => {
    const taskType = taskTypes.find(t => t.value === type);
    return taskType ? taskType.icon : '📋';
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'pending': return '#94a3b8';
      case 'in_progress': return '#3b82f6';
      case 'completed': return '#10b981';
      case 'failed': return '#ef4444';
      default: return '#94a3b8';
    }
  };

  const getPriorityLabel = (priority) => {
    if (priority >= 8) return { label: 'Critical', color: '#ef4444' };
    if (priority >= 6) return { label: 'High', color: '#f59e0b' };
    if (priority >= 4) return { label: 'Medium', color: '#3b82f6' };
    return { label: 'Low', color: '#94a3b8' };
  };

  return (
    <div className="task-panel">
      <div className="task-header">
        <h2>📋 Task Queue</h2>
        <button 
          className="create-task-btn"
          onClick={() => setShowCreateForm(!showCreateForm)}
        >
          {showCreateForm ? '✕ Cancel' : '➕ New Task'}
        </button>
      </div>

      {message && (
        <div className={`message ${message.type}`}>
          {message.text}
        </div>
      )}

      {/* Create Task Form */}
      {showCreateForm && (
        <div className="create-task-form">
          <h3>Create New Task</h3>
          <form onSubmit={createTask}>
            <div className="form-row">
              <label>
                Task Type:
                <select value={taskType} onChange={(e) => setTaskType(e.target.value)}>
                  {taskTypes.map(type => (
                    <option key={type.value} value={type.value}>
                      {type.label}
                    </option>
                  ))}
                </select>
              </label>

              <label>
                Priority (1-10):
                <input
                  type="range"
                  min="1"
                  max="10"
                  value={priority}
                  onChange={(e) => setPriority(e.target.value)}
                />
                <span className="priority-value" style={{ color: getPriorityLabel(priority).color }}>
                  {priority} - {getPriorityLabel(priority).label}
                </span>
              </label>
            </div>

            <label>
              Assign to Turtle (optional):
              <select value={assignedTurtleId} onChange={(e) => setAssignedTurtleId(e.target.value)}>
                <option value="">Any available turtle</option>
                {turtles.map(turtle => (
                  <option key={turtle.turtleID} value={turtle.turtleID}>
                    🐢 {turtle.name || `Turtle ${turtle.turtleID}`}
                  </option>
                ))}
              </select>
            </label>

            <div className="coordinates-section">
              <h4>Coordinates (optional):</h4>
              <div className="coordinates-grid">
                <div className="coord-group">
                  <span>Start:</span>
                  <input
                    type="number"
                    placeholder="X1"
                    value={parameters.x1}
                    onChange={(e) => setParameters({...parameters, x1: e.target.value})}
                  />
                  <input
                    type="number"
                    placeholder="Y1"
                    value={parameters.y1}
                    onChange={(e) => setParameters({...parameters, y1: e.target.value})}
                  />
                  <input
                    type="number"
                    placeholder="Z1"
                    value={parameters.z1}
                    onChange={(e) => setParameters({...parameters, z1: e.target.value})}
                  />
                </div>
                <div className="coord-group">
                  <span>End:</span>
                  <input
                    type="number"
                    placeholder="X2"
                    value={parameters.x2}
                    onChange={(e) => setParameters({...parameters, x2: e.target.value})}
                  />
                  <input
                    type="number"
                    placeholder="Y2"
                    value={parameters.y2}
                    onChange={(e) => setParameters({...parameters, y2: e.target.value})}
                  />
                  <input
                    type="number"
                    placeholder="Z2"
                    value={parameters.z2}
                    onChange={(e) => setParameters({...parameters, z2: e.target.value})}
                  />
                </div>
              </div>
            </div>

            <button type="submit" className="submit-btn">
              Create Task
            </button>
          </form>
        </div>
      )}

      {/* Filter Tabs */}
      <div className="task-filters">
        <button 
          className={filter === 'all' ? 'active' : ''} 
          onClick={() => setFilter('all')}
        >
          All ({tasks.length})
        </button>
        <button 
          className={filter === 'pending' ? 'active' : ''} 
          onClick={() => setFilter('pending')}
        >
          Pending
        </button>
        <button 
          className={filter === 'in_progress' ? 'active' : ''} 
          onClick={() => setFilter('in_progress')}
        >
          In Progress
        </button>
        <button 
          className={filter === 'completed' ? 'active' : ''} 
          onClick={() => setFilter('completed')}
        >
          Completed
        </button>
        <button 
          className={filter === 'failed' ? 'active' : ''} 
          onClick={() => setFilter('failed')}
        >
          Failed
        </button>
      </div>

      {/* Tasks List */}
      <div className="tasks-list">
        {loading && <div className="loading">Loading tasks...</div>}

        {!loading && tasks.length === 0 && (
          <div className="empty-state">
            <div className="empty-icon">📋</div>
            <div className="empty-title">No Tasks Found</div>
            <div className="empty-text">
              {filter === 'all' 
                ? 'Create a task to get started!'
                : `No ${filter.replace('_', ' ')} tasks`}
            </div>
          </div>
        )}

        {tasks.map(task => {
          const priorityInfo = getPriorityLabel(task.priority);
          const turtle = turtles.find(t => t.turtleID === task.assignedTurtleId);
          
          return (
            <div key={task.taskId} className="task-card">
              <div className="task-card-header">
                <div className="task-title">
                  <span className="task-icon">{getTaskIcon(task.taskType)}</span>
                  <span className="task-type">
                    {taskTypes.find(t => t.value === task.taskType)?.label || task.taskType}
                  </span>
                </div>
                <div className="task-badges">
                  <span 
                    className="priority-badge" 
                    style={{ backgroundColor: priorityInfo.color }}
                  >
                    {priorityInfo.label}
                  </span>
                  <span 
                    className="status-badge" 
                    style={{ backgroundColor: getStatusColor(task.status) }}
                  >
                    {task.status.replace('_', ' ')}
                  </span>
                </div>
              </div>

              {task.assignedTurtleId && (
                <div className="task-assignment">
                  🐢 {turtle?.name || `Turtle ${task.assignedTurtleId}`}
                </div>
              )}

              {task.parameters && Object.keys(task.parameters).length > 0 && (
                <div className="task-parameters">
                  <strong>Area:</strong> ({task.parameters.x1}, {task.parameters.y1}, {task.parameters.z1}) → 
                  ({task.parameters.x2}, {task.parameters.y2}, {task.parameters.z2})
                </div>
              )}

              {task.result && (
                <div className="task-result">
                  <strong>Result:</strong> {task.result}
                </div>
              )}

              <div className="task-actions">
                {task.status === 'pending' && (
                  <>
                    <button onClick={() => updateTaskStatus(task.taskId, 'in_progress')}>
                      ▶️ Start
                    </button>
                    <button onClick={() => deleteTask(task.taskId)}>
                      🗑️ Delete
                    </button>
                  </>
                )}
                {task.status === 'in_progress' && (
                  <>
                    <button onClick={() => updateTaskStatus(task.taskId, 'completed', 'Task completed')}>
                      ✅ Complete
                    </button>
                    <button onClick={() => updateTaskStatus(task.taskId, 'failed', 'Task failed')}>
                      ❌ Fail
                    </button>
                  </>
                )}
                {(task.status === 'completed' || task.status === 'failed') && (
                  <button onClick={() => deleteTask(task.taskId)}>
                    🗑️ Delete
                  </button>
                )}
              </div>

              <div className="task-timestamp">
                Created: {new Date(task.createdAt).toLocaleString()}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TaskPanel;