import React, { useState, useEffect } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { useWorkOrderDetails, useWorkOrderMutations } from '../hooks/useWorkOrder';
import { FaArrowLeft, FaSave, FaEdit, FaCheckCircle, FaClock } from 'react-icons/fa';
import type { CreateWorkOrderData } from '../services/workOrderService';

const WorkOrderDetail: React.FC = () => {
  const { workOrderName } = useParams<{ workOrderName: string }>();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const duplicateFromWorkOrder = searchParams.get('duplicate');
  
  const isNewWorkOrder = workOrderName === 'new';
  const isDuplicating = isNewWorkOrder && !!duplicateFromWorkOrder;
  
  const { workOrder, loading, error } = useWorkOrderDetails(
    isDuplicating ? duplicateFromWorkOrder : (isNewWorkOrder ? null : workOrderName || null)
  );
  const { createWorkOrder, updateWorkOrder, updateStatus, loading: saving } = useWorkOrderMutations();
  
  const [isEditing, setIsEditing] = useState(isNewWorkOrder);
  const [formData, setFormData] = useState<CreateWorkOrderData>({
    company: '',
    work_order_type: '',
    asset: '',
    asset_name: '',
    description: '',
    repair_status: 'Open',
    workflow_state: '',
    department: '',
    custom_priority_: 'Normal',
    asset_type: '',
    manufacturer: '',
    serial_number: '',
    model: '',
    custom_site_contractor: '',
    custom_subcontractor: '',
    failure_date: '',
    custom_deadline_date: '',
  });

  useEffect(() => {
    if (workOrder) {
      setFormData({
        company: workOrder.company || '',
        work_order_type: workOrder.work_order_type || '',
        asset: workOrder.asset || '',
        asset_name: isDuplicating ? `${workOrder.asset_name} (Copy)` : (workOrder.asset_name || ''),
        description: workOrder.description || '',
        repair_status: isDuplicating ? 'Open' : (workOrder.repair_status || 'Open'),
        workflow_state: workOrder.workflow_state || '',
        department: workOrder.department || '',
        custom_priority_: workOrder.custom_priority_ || 'Normal',
        asset_type: workOrder.asset_type || '',
        manufacturer: workOrder.manufacturer || '',
        serial_number: workOrder.serial_number || '',
        model: workOrder.model || '',
        custom_site_contractor: workOrder.custom_site_contractor || '',
        custom_subcontractor: workOrder.custom_subcontractor || '',
        failure_date: workOrder.failure_date || '',
        custom_deadline_date: workOrder.custom_deadline_date || '',
      });
    }
  }, [workOrder, isDuplicating]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!formData.work_order_type) {
      alert('Please select a Work Order Type');
      return;
    }
    
    console.log('Submitting work order data:', formData);
    
    try {
      if (isNewWorkOrder || isDuplicating) {
        const newWorkOrder = await createWorkOrder(formData);
        const successMessage = isDuplicating 
          ? 'Work order duplicated successfully!' 
          : 'Work order created successfully!';
        alert(successMessage);
        navigate(`/work-orders/${newWorkOrder.name}`);
      } else if (workOrderName) {
        await updateWorkOrder(workOrderName, formData);
        alert('Work order updated successfully!');
        setIsEditing(false);
      }
    } catch (err) {
      console.error('Work order save error:', err);
      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
      
      if (errorMessage.includes('404') || errorMessage.includes('not found') || 
          errorMessage.includes('has no attribute') || errorMessage.includes('417')) {
        alert(
          '⚠️ Work Order API Not Deployed\n\n' +
          'The Work Order API endpoint is not deployed on your Frappe server yet.\n\n' +
          'Deploy work_order_api.py to: frappe-bench/apps/asset_lite/asset_lite/api/\n\n' +
          'Error: ' + errorMessage
        );
      } else {
        alert('Failed to save work order:\n\n' + errorMessage);
      }
    }
  };

  const handleStatusUpdate = async (newStatus: string) => {
    if (!workOrderName || isNewWorkOrder) return;
    
    try {
      await updateStatus(workOrderName, newStatus);
      alert('Status updated successfully!');
      window.location.reload();
    } catch (err) {
      alert('Failed to update status: ' + (err instanceof Error ? err.message : 'Unknown error'));
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading work order details...</p>
        </div>
      </div>
    );
  }

  if (error && !isNewWorkOrder && !isDuplicating) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <p className="text-red-600 dark:text-red-400">Error: {error}</p>
          <button 
            onClick={() => navigate('/work-orders')}
            className="mt-2 text-red-700 dark:text-red-400 underline hover:text-red-800 dark:hover:text-red-300"
          >
            Back to work orders list
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
      {/* Header */}
      <div className="mb-6 flex justify-between items-center">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigate('/work-orders')}
            className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-2"
          >
            <FaArrowLeft />
            <span className="text-gray-900 dark:text-white">
              {isDuplicating ? 'Duplicate Work Order' : (isNewWorkOrder ? 'New Work Order' : 'Work Order Details')}
            </span>
          </button>
        </div>
        <div className="flex items-center gap-3">
          {!isNewWorkOrder && !isEditing && (
            <>
              <button
                onClick={() => setIsEditing(true)}
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
              >
                <FaEdit />
                Edit
              </button>
              {/* Quick Status Update Buttons */}
              {workOrder?.repair_status !== 'Completed' && (
                <button
                  onClick={() => handleStatusUpdate('Completed')}
                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
                  disabled={saving}
                >
                  <FaCheckCircle />
                  Mark Complete
                </button>
              )}
              {workOrder?.repair_status !== 'In Progress' && workOrder?.repair_status !== 'Completed' && (
                <button
                  onClick={() => handleStatusUpdate('In Progress')}
                  className="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
                  disabled={saving}
                >
                  <FaClock />
                  Start Work
                </button>
              )}
            </>
          )}
          {isEditing && (
            <>
              <button
                onClick={() => {
                  if (isNewWorkOrder) {
                    navigate('/work-orders');
                  } else {
                    setIsEditing(false);
                  }
                }}
                className="bg-gray-300 hover:bg-gray-400 text-gray-700 px-6 py-2 rounded-lg"
                disabled={saving}
              >
                Cancel
              </button>
              <button
                onClick={handleSubmit}
                disabled={saving}
                className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
              >
                <FaSave />
                {saving ? 'Saving...' : 'Save Changes'}
              </button>
            </>
          )}
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Main Info */}
          <div className="lg:col-span-2 space-y-6">
            {/* Work Order Information */}
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
              <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">Work Order Information</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Work Order ID
                </label>
                <input
                  type="text"
                  value={isNewWorkOrder || isDuplicating ? 'Auto-generated' : workOrder?.name}
                  disabled
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
                />
                {isDuplicating && (
                  <p className="mt-1 text-xs text-blue-600 dark:text-blue-400">
                    💡 Duplicating from: {duplicateFromWorkOrder}
                  </p>
                )}
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Work Order Type <span className="text-red-500">*</span>
                </label>
                <select
                  name="work_order_type"
                  value={formData.work_order_type}
                  onChange={handleChange}
                  required
                  disabled={!isEditing}
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                >
                  <option value="">Select type</option>
                  <option value="Preventive Maintenance">Preventive Maintenance</option>
                  <option value="Corrective Maintenance">Corrective Maintenance</option>
                  <option value="Breakdown Maintenance">Breakdown Maintenance</option>
                  <option value="Calibration">Calibration</option>
                  <option value="Inspection">Inspection</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Priority
                </label>
                <select
                  name="custom_priority_"
                  value={formData.custom_priority_}
                  onChange={handleChange}
                  disabled={!isEditing}
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                >
                  <option value="Low">Low</option>
                  <option value="Normal">Normal</option>
                  <option value="Medium">Medium</option>
                  <option value="High">High</option>
                  <option value="Urgent">Urgent</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Status
                </label>
                <select
                  name="repair_status"
                  value={formData.repair_status}
                  onChange={handleChange}
                  disabled={!isEditing}
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                >
                  <option value="Open">Open</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Pending">Pending</option>
                  <option value="Completed">Completed</option>
                  <option value="Cancelled">Cancelled</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Company
                </label>
                <input
                  type="text"
                  name="company"
                  value={formData.company}
                  onChange={handleChange}
                  disabled={!isEditing}
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Description
                </label>
                <textarea
                  name="description"
                  value={formData.description}
                  onChange={handleChange}
                  rows={3}
                  disabled={!isEditing}
                  placeholder="Describe the issue or maintenance task..."
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                />
              </div>
            </div>
          </div>

          {/* COLUMN 2: Asset Information */}
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
              Asset Information
            </h2>
            <div className="space-y-4">

              <div>
                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Asset ID
                </label>
                <input
                  type="text"
                  name="asset"
                  value={formData.asset}
                  onChange={handleChange}
                  disabled={!isEditing}
                  placeholder="e.g. ACC-ASS-2025-00001"
                  className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                />
              </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Asset Name
                  </label>
                  <input
                    type="text"
                    name="asset_name"
                    value={formData.asset_name}
                    onChange={handleChange}
                    disabled={!isEditing}
                    placeholder="Asset name"
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Asset Type
                  </label>
                  <input
                    type="text"
                    name="asset_type"
                    value={formData.asset_type}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Manufacturer
                  </label>
                  <input
                    type="text"
                    name="manufacturer"
                    value={formData.manufacturer}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Serial Number
                  </label>
                  <input
                    type="text"
                    name="serial_number"
                    value={formData.serial_number}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Model
                  </label>
                  <input
                    type="text"
                    name="model"
                    value={formData.model}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>
              </div>
            </div>

            {/* Location & Assignment */}
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
              <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">Location & Assignment</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Department
                  </label>
                  <input
                    type="text"
                    name="department"
                    value={formData.department}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Site Contractor
                  </label>
                  <input
                    type="text"
                    name="custom_site_contractor"
                    value={formData.custom_site_contractor}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Subcontractor
                  </label>
                  <input
                    type="text"
                    name="custom_subcontractor"
                    value={formData.custom_subcontractor}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Failure Date
                  </label>
                  <input
                    type="date"
                    name="failure_date"
                    value={formData.failure_date}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>

                <div>
                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Deadline Date
                  </label>
                  <input
                    type="date"
                    name="custom_deadline_date"
                    value={formData.custom_deadline_date}
                    onChange={handleChange}
                    disabled={!isEditing}
                    className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Status & Summary */}
          <div className="space-y-6">
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 border border-gray-200 dark:border-gray-700">
              <h2 className="text-base font-semibold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">Status Summary</h2>
              
              {!isNewWorkOrder && workOrder && (
                <div className="space-y-4">
                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Current Status</p>
                    <p className="text-lg font-semibold text-gray-900 dark:text-white">
                      {workOrder.repair_status || 'Open'}
                    </p>
                  </div>

                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Priority</p>
                    <p className="text-lg font-semibold text-gray-900 dark:text-white">
                      {workOrder.custom_priority_ || 'Normal'}
                    </p>
                  </div>

                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Created</p>
                    <p className="text-sm text-gray-900 dark:text-white">
                      {workOrder.creation ? new Date(workOrder.creation).toLocaleString() : '-'}
                    </p>
                  </div>

                  <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Last Modified</p>
                    <p className="text-sm text-gray-900 dark:text-white">
                      {workOrder.modified ? new Date(workOrder.modified).toLocaleString() : '-'}
                    </p>
                  </div>
                </div>
              )}

              {isNewWorkOrder && (
                <div className="text-center py-8">
                  <FaClock className="text-4xl text-gray-400 dark:text-gray-500 mx-auto mb-2" />
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Status information will appear after creation
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default WorkOrderDetail;