import React, { useState } from 'react';
import { getSsoToken } from '../utils/auth';
import { EmailData } from '../types';

interface TaskCreatorProps {
  emailData: EmailData | null;
  onTaskCreated: (taskData: any) => void;
}

interface TaskFormData {
  title: string;
  description: string;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  dueDate: string;
  estimatedHours: number;
  matterId: string;
  assignedTo: string;
}

const TaskCreator: React.FC<TaskCreatorProps> = ({ emailData, onTaskCreated }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [taskForm, setTaskForm] = useState<TaskFormData>({
    title: '',
    description: '',
    priority: 'medium',
    dueDate: '',
    estimatedHours: 1,
    matterId: '',
    assignedTo: ''
  });

  // Auto-populate from email when available
  React.useEffect(() => {
    if (emailData && isOpen) {
      setTaskForm(prev => ({
        ...prev,
        title: emailData.subject || '',
        description: `Email from: ${emailData.email}\nSubject: ${emailData.subject}\n\n${emailData.body?.substring(0, 200) || ''}`,
        assignedTo: emailData.email || ''
      }));
    }
  }, [emailData, isOpen]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      // Create task via API
      const taskData = {
        ...taskForm,
        emailSubject: emailData?.subject,
        emailFrom: emailData?.email,
        emailBody: emailData?.body,
        createdFromOutlook: true
      };

      // Call your CRM API
      const bearer = await getSsoToken();
      const response = await fetch('https://firmly.webiton.pt/api/tasks/create-from-outlook', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${bearer}`
        },
        body: JSON.stringify(taskData)
      });

      if (response.ok) {
        const result = await response.json();
        onTaskCreated(result);
        setIsOpen(false);
        setTaskForm({
          title: '',
          description: '',
          priority: 'medium',
          dueDate: '',
          estimatedHours: 1,
          matterId: '',
          assignedTo: ''
        });
        
        // Show success message in Outlook
        Office.context.ui.displayDialogAsync(
          'Task created successfully!',
          { height: 20, width: 30 }
        );
      } else {
        throw new Error('Failed to create task');
      }
    } catch (error) {
      console.error('Error creating task:', error);
      alert('Failed to create task. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleInputChange = (field: keyof TaskFormData, value: string | number) => {
    setTaskForm(prev => ({ ...prev, [field]: value }));
  };

  return (
    <div className="task-creator">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="task-creator-toggle"
        disabled={!emailData}
      >
        📋 Create Task from Email
      </button>

      {isOpen && (
        <div className="task-creator-form">
          <h3>Create New Task</h3>
          <form onSubmit={handleSubmit}>
            <div className="form-group">
              <label>Task Title *</label>
              <input
                type="text"
                value={taskForm.title}
                onChange={(e) => handleInputChange('title', e.target.value)}
                required
                placeholder="Enter task title"
              />
            </div>

            <div className="form-group">
              <label>Description</label>
              <textarea
                value={taskForm.description}
                onChange={(e) => handleInputChange('description', e.target.value)}
                rows={4}
                placeholder="Task description..."
              />
            </div>

            <div className="form-row">
              <div className="form-group">
                <label>Priority</label>
                <select
                  value={taskForm.priority}
                  onChange={(e) => handleInputChange('priority', e.target.value)}
                >
                  <option value="low">Low</option>
                  <option value="medium">Medium</option>
                  <option value="high">High</option>
                  <option value="urgent">Urgent</option>
                </select>
              </div>

              <div className="form-group">
                <label>Due Date</label>
                <input
                  type="date"
                  value={taskForm.dueDate}
                  onChange={(e) => handleInputChange('dueDate', e.target.value)}
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label>Estimated Hours</label>
                <input
                  type="number"
                  min="0.5"
                  step="0.5"
                  value={taskForm.estimatedHours}
                  onChange={(e) => handleInputChange('estimatedHours', parseFloat(e.target.value))}
                />
              </div>

              <div className="form-group">
                <label>Matter ID</label>
                <input
                  type="text"
                  value={taskForm.matterId}
                  onChange={(e) => handleInputChange('matterId', e.target.value)}
                  placeholder="Optional matter ID"
                />
              </div>
            </div>

            <div className="form-group">
              <label>Assign To</label>
              <input
                type="email"
                value={taskForm.assignedTo}
                onChange={(e) => handleInputChange('assignedTo', e.target.value)}
                placeholder="Email address"
              />
            </div>

            <div className="form-actions">
              <button type="button" onClick={() => setIsOpen(false)}>
                Cancel
              </button>
              <button type="submit" disabled={loading || !taskForm.title}>
                {loading ? 'Creating...' : 'Create Task'}
              </button>
            </div>
          </form>
        </div>
      )}
    </div>
  );
};

export default TaskCreator;