import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { 
  Form, 
  Button, 
  Card, 
  Row, 
  Col, 
  Alert, 
  Spinner,
  Table,
  InputGroup
} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faSave, 
  faPlus, 
  faMinus, 
  faCamera,
  faClock,
  faTools
} from '@fortawesome/free-solid-svg-icons';
import PartSelector from './PartSelector';
import ImageUploader from './ImageUploader';

const ServiceRecordForm = () => {
  const { appointmentId } = useParams();
  const navigate = useNavigate();
  
  const [appointment, setAppointment] = useState(null);
  const [equipment, setEquipment] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);
  
  const [formData, setFormData] = useState({
    diagnosis: '',
    workPerformed: '',
    recommendations: '',
    followUpRequired: false,
    parts: [],
    images: []
  });
  
  // Timer for service duration
  const [timer, setTimer] = useState({
    startTime: null,
    endTime: null,
    isRunning: false,
    duration: 0
  });
  
  useEffect(() => {
    const fetchAppointmentDetails = async () => {
      try {
        setLoading(true);
        const response = await axios.get(`/api/v1/appointments/${appointmentId}`);
        setAppointment(response.data.data);
        
        // Fetch equipment details
        const equipmentResponse = await axios.get(
          `/api/v1/properties/${response.data.data.propertyId}/equipment/${response.data.data.equipmentId}`
        );
        setEquipment(equipmentResponse.data.data);
        
        setError(null);
      } catch (err) {
        setError(err.response?.data?.message || 'Failed to load appointment details');
      } finally {
        setLoading(false);
      }
    };
    
    fetchAppointmentDetails();
  }, [appointmentId]);
  
  // Handle timer
  useEffect(() => {
    let interval = null;
    
    if (timer.isRunning) {
      interval = setInterval(() => {
        const now = new Date();
        const diff = Math.floor((now - timer.startTime) / 1000);
        setTimer(prev => ({ ...prev, duration: diff }));
      }, 1000);
    }
    
    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [timer.isRunning, timer.startTime]);
  
  const startTimer = () => {
    const now = new Date();
    setTimer({
      startTime: now,
      endTime: null,
      isRunning: true,
      duration: 0
    });
  };
  
  const stopTimer = () => {
    const now = new Date();
    setTimer(prev => ({
      ...prev,
      endTime: now,
      isRunning: false
    }));
  };
  
  const formatDuration = (seconds) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };
  
  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };
  
  const handleAddPart = (part) => {
    setFormData(prev => ({
      ...prev,
      parts: [...prev.parts, part]
    }));
  };
  
  const handleRemovePart = (index) => {
    setFormData(prev => ({
      ...prev,
      parts: prev.parts.filter((_, i) => i !== index)
    }));
  };
  
  const handleImageUpload = (images) => {
    setFormData(prev => ({
      ...prev,
      images: [...prev.images, ...images]
    }));
  };
  
  const handleRemoveImage = (index) => {
    setFormData(prev => ({
      ...prev,
      images: prev.images.filter((_, i) => i !== index)
    }));
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      setSaving(true);
      
      // Prepare service record data
      const serviceRecordData = {
        appointmentId,
        equipmentId: equipment.id,
        diagnosis: formData.diagnosis,
        workPerformed: formData.workPerformed,
        recommendations: formData.recommendations,
        followUpRequired: formData.followUpRequired,
        startTime: timer.startTime,
        endTime: timer.endTime || new Date(),
        parts: formData.parts.map(part => ({
          partId: part.id,
          quantity: part.quantity,
          unitPrice: part.unitPrice
        }))
      };
      
      // Create service record
      const response = await axios.post('/api/v1/service-records', serviceRecordData);
      
      // Upload images if any
      if (formData.images.length > 0) {
        const formPayload = new FormData();
        formData.images.forEach(image => {
          formPayload.append('images[]', image.file);
        });
        
        await axios.post(`/api/v1/service-records/${response.data.data.recordId}/images`, formPayload, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
      }
      
      // Update appointment status
      await axios.patch(`/api/v1/appointments/${appointmentId}`, {
        status: 'completed'
      });
      
      setSuccess(true);
      
      // Redirect after a short delay
      setTimeout(() => {
        navigate(`/technician/service-records/${response.data.data.recordId}`);
      }, 1500);
      
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to save service record');
      setSaving(false);
    }
  };
  
  if (loading) {
    return (
      <div className="d-flex justify-content-center my-5">
        <Spinner animation="border" role="status">
          <span className="visually-hidden">Loading...</span>
        </Spinner>
      </div>
    );
  }
  
  if (!appointment || !equipment) {
    return (
      <Alert variant="danger">
        Appointment or equipment details not found
      </Alert>
    );
  }
  
  return (
    <div className="service-record-form">
      <Card className="shadow-sm mb-4">
        <Card.Header className="bg-primary text-white">
          <h3 className="mb-0">Create Service Record</h3>
        </Card.Header>
        
        <Card.Body>
          {error && (
            <Alert variant="danger" dismissible onClose={() => setError(null)}>
              {error}
            </Alert>
          )}
          
          {success && (
            <Alert variant="success">
              Service record saved successfully!
            </Alert>
          )}
          
          <div className="equipment-summary mb-4">
            <h4>Equipment Information</h4>
            <Row>
              <Col md={6}>
                <Table bordered size="sm">
                  <tbody>
                    <tr>
                      <th>Manufacturer</th>
                      <td>{equipment.model.manufacturerName}</td>
                    </tr>
                    <tr>
                      <th>Model</th>
                      <td>{equipment.model.name} ({equipment.model.modelNumber})</td>
                    </tr>
                    <tr>
                      <th>Serial Number</th>
                      <td>{equipment.serialNumber || 'N/A'}</td>
                    </tr>
                  </tbody>
                </Table>
              </Col>
              <Col md={6}>
                <Table bordered size="sm">
                  <tbody>
                    <tr>
                      <th>Property</th>
                      <td>{appointment.propertyName}</td>
                    </tr>
                    <tr>
                      <th>Address</th>
                      <td>{appointment.propertyAddress}</td>
                    </tr>
                    <tr>
                      <th>Customer</th>
                      <td>{appointment.customerName}</td>
                    </tr>
                  </tbody>
                </Table>
              </Col>
            </Row>
          </div>
          
          <div className="service-timer mb-4">
            <Card className="border-secondary">
              <Card.Header className="bg-secondary text-white">
                <FontAwesomeIcon icon={faClock} className="me-2" />
                Service Timer
              </Card.Header>
              <Card.Body className="text-center">
                <h3 className="timer-display mb-3">
                  {formatDuration(timer.duration)}
                </h3>
                
                <div className="d-flex justify-content-center">
                  {!timer.isRunning ? (
                    <Button 
                      variant="success" 
                      onClick={startTimer}
                      disabled={timer.startTime && timer.endTime}
                    >
                      {!timer.startTime ? 'Start Service' : 'Resume Service'}
                    </Button>
                  ) : (
                    <Button variant="warning" onClick={stopTimer}>
                      Pause Service
                    </Button>
                  )}
                </div>
              </Card.Body>
            </Card>
          </div>
          
          <Form onSubmit={handleSubmit}>
            <h4 className="mb-3">
              <FontAwesomeIcon icon={faTools} className="me-2" />
              Service Details
            </h4>
            
            <Form.Group className="mb-3">
              <Form.Label>Diagnosis</Form.Label>
              <Form.Control
                as="textarea"
                rows={3}
                name="diagnosis"
                value={formData.diagnosis}
                onChange={handleInputChange}
                required
                placeholder="Enter detailed diagnosis of the issue"
              />
            </Form.Group>
            
            <Form.Group className="mb-3">
              <Form.Label>Work Performed</Form.Label>
              <Form.Control
                as="textarea"
                rows={4}
                name="workPerformed"
                value={formData.workPerformed}
                onChange={handleInputChange}
                required
                placeholder="Describe the work performed"
              />
            </Form.Group>
            
            <Form.Group className="mb-3">
              <Form.Label>Recommendations</Form.Label>
              <Form.Control
                as="textarea"
                rows={3}
                name="recommendations"
                value={formData.recommendations}
                onChange={handleInputChange}
                placeholder="Enter any recommendations for future maintenance"
              />
            </Form.Group>
            
            <Form.Group className="mb-4">
              <Form.Check
                type="checkbox"
                label="Follow-up service required"
                name="followUpRequired"
                checked={formData.followUpRequired}
                onChange={handleInputChange}
              />
            </Form.Group>
            
            <h4 className="mb-3">Parts Used</h4>
            
            <PartSelector 
              equipmentModelId={equipment.modelId}
              onAddPart={handleAddPart}
            />
            
            {formData.parts.length > 0 && (
              <Table bordered responsive className="mt-3">
                <thead className="bg-light">
                  <tr>
                    <th>Part Number</th>
                    <th>Description</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {formData.parts.map((part, index) => (
                    <tr key={index}>
                      <td>{part.partNumber}</td>
                      <td>{part.name}</td>
                      <td>{part.quantity}</td>
                      <td>${part.unitPrice.toFixed(2)}</td>
                      <td>${(part.quantity * part.unitPrice).toFixed(2)}</td>
                      <td>
                        <Button 
                          variant="danger" 
                          size="sm"
                          onClick={() => handleRemovePart(index)}
                        >
                          <FontAwesomeIcon icon={faMinus} />
                        </Button>
                      </td>
                    </tr>
                  ))}
                  <tr className="table-secondary">
                    <td colSpan={4} className="text-end fw-bold">Total:</td>
                    <td colSpan={2} className="fw-bold">
                      ${formData.parts.reduce((total, part) => 
                        total + (part.quantity * part.unitPrice), 0).toFixed(2)}
                    </td>
                  </tr>
                </tbody>
              </Table>
            )}
            
            <h4 className="mb-3 mt-4">
              <FontAwesomeIcon icon={faCamera} className="me-2" />
              Service Images
            </h4>
            
            <ImageUploader onUpload={handleImageUpload} />
            
            {formData.images.length > 0 && (
              <Row className="mt-3">
                {formData.images.map((image, index) => (
                  <Col md={3} key={index} className="mb-3">
                    <div className="position-relative">
                      <img 
                        src={URL.createObjectURL(image.file)} 
                        alt={`Service ${index}`} 
                        className="img-thumbnail" 
                      />
                      <Button
                        variant="danger"
                        size="sm"
                        className="position-absolute top-0 end-0"
                        onClick={() => handleRemoveImage(index)}
                      >
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                    </div>
                  </Col>
                ))}
              </Row>
            )}
            
            <div className="d-flex justify-content-between mt-4">
              <Button 
                variant="secondary"
                onClick={() => navigate('/technician/appointments')}
                disabled={saving}
              >
                Cancel
              </Button>
              
              <Button 
                variant="primary" 
                type="submit"
                disabled={saving || !timer.startTime || timer.isRunning}
              >
                {saving ? (
                  <>
                    <Spinner animation="border" size="sm" className="me-2" />
                    Saving...
                  </>
                ) : (
                  <>
                    <FontAwesomeIcon icon={faSave} className="me-2" />
                    Complete Service
                  </>
                )}
              </Button>
            </div>
          </Form>
        </Card.Body>
      </Card>
    </div>
  );
};

export default ServiceRecordForm;