import React, { useState, useEffect } from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import {
  Container,
  Row,
  Col,
  Card,
  Button,
  Spinner,
  Alert,
  Form as BootstrapForm
} from 'react-bootstrap';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import { useNavigate, useParams } from 'react-router-dom';

const ServiceRequestForm = () => {
  const navigate = useNavigate();
  const { propertyId, equipmentId } = useParams();
  
  const [properties, setProperties] = useState([]);
  const [equipment, setEquipment] = useState([]);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);
  const [selectedPropertyId, setSelectedPropertyId] = useState(propertyId || '');
  
  // Initial values for the form
  const initialValues = {
    property_id: propertyId || '',
    equipment_id: equipmentId || '',
    service_type: 'repair', // Default service type
    priority: 'medium', // Default priority
    description: '',
    preferred_date: null,
    preferred_time_start: '',
    preferred_time_end: ''
  };
  
  // Validation schema using Yup
  const validationSchema = Yup.object({
    property_id: Yup.number()
      .required('Property is required'),
    equipment_id: Yup.number()
      .nullable(),
    service_type: Yup.string()
      .required('Service type is required')
      .oneOf(['installation', 'repair', 'maintenance', 'inspection']),
    priority: Yup.string()
      .required('Priority is required')
      .oneOf(['low', 'medium', 'high', 'emergency']),
    description: Yup.string()
      .required('Description is required')
      .min(10, 'Description must be at least 10 characters')
      .max(1000, 'Description must be less than 1000 characters'),
    preferred_date: Yup.date()
      .nullable()
      .min(new Date(), 'Preferred date must be today or later'),
    preferred_time_start: Yup.string()
      .nullable()
      .matches(/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/, 'Invalid time format'),
    preferred_time_end: Yup.string()
      .nullable()
      .matches(/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/, 'Invalid time format')
      .test('is-greater', 'End time must be after start time', function(value) {
        const { preferred_time_start } = this.parent;
        if (!preferred_time_start || !value) return true;
        return value > preferred_time_start;
      })
  });
  
  // Load properties on component mount
  useEffect(() => {
    const fetchUserProperties = async () => {
      try {
        const response = await axios.get('/api/v1/properties');
        setProperties(response.data.data);
        setLoading(false);
        
        // If only one property exists, select it by default
        if (response.data.data.length === 1 && !propertyId) {
          setSelectedPropertyId(response.data.data[0].id.toString());
        }
      } catch (err) {
        setError('Failed to load properties. Please try again later.');
        setLoading(false);
      }
    };
    
    fetchUserProperties();
  }, [propertyId]);
  
  // Load equipment when property is selected
  useEffect(() => {
    const fetchPropertyEquipment = async () => {
      if (!selectedPropertyId) {
        setEquipment([]);
        return;
      }
      
      try {
        const response = await axios.get(`/api/v1/properties/${selectedPropertyId}/equipment`);
        setEquipment(response.data.data);
      } catch (err) {
        setError('Failed to load equipment. Please try again later.');
      }
    };
    
    fetchPropertyEquipment();
  }, [selectedPropertyId]);
  
  // Handle property selection change
  const handlePropertyChange = (e, setFieldValue) => {
    const newPropertyId = e.target.value;
    setSelectedPropertyId(newPropertyId);
    setFieldValue('property_id', newPropertyId);
    setFieldValue('equipment_id', ''); // Reset equipment selection
  };
  
  // Handle form submission
  const handleSubmit = async (values, { resetForm }) => {
    setSubmitting(true);
    setError(null);
    
    try {
      // Format time values for API
      const formattedValues = {
        ...values,
        preferred_date: values.preferred_date ? formatDate(values.preferred_date) : null
      };
      
      await axios.post('/api/v1/service-requests', formattedValues);
      
      setSuccess(true);
      resetForm();
      
      // Redirect after a short delay
      setTimeout(() => {
        navigate('/service-requests');
      }, 2000);
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to create service request. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };
  
  // Helper function to format date for API
  const formatDate = (date) => {
    return date.toISOString().split('T')[0];
  };
  
  // Helper function to format time for display
  const formatTimeForDisplay = (timeString) => {
    if (!timeString) return '';
    
    const [hours, minutes] = timeString.split(':');
    const date = new Date();
    date.setHours(parseInt(hours, 10));
    date.setMinutes(parseInt(minutes, 10));
    
    return date;
  };
  
  if (loading) {
    return (
      <Container className="py-4">
        <div className="text-center">
          <Spinner animation="border" role="status">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
          <p className="mt-2">Loading your properties...</p>
        </div>
      </Container>
    );
  }
  
  if (properties.length === 0) {
    return (
      <Container className="py-4">
        <Alert variant="info">
          <Alert.Heading>No Properties Found</Alert.Heading>
          <p>
            You need to add a property before you can request service.
          </p>
          <div className="d-flex justify-content-end">
            <Button 
              variant="outline-primary"
              onClick={() => navigate('/properties/new')}
            >
              Add a Property
            </Button>
          </div>
        </Alert>
      </Container>
    );
  }
  
  return (
    <Container className="py-4">
      <Row className="justify-content-center">
        <Col lg={10}>
          <Card className="shadow-sm">
            <Card.Header className="bg-primary text-white">
              <h3 className="mb-0">Request Service</h3>
            </Card.Header>
            
            <Card.Body>
              {error && (
                <Alert variant="danger" dismissible onClose={() => setError(null)}>
                  {error}
                </Alert>
              )}
              
              {success && (
                <Alert variant="success">
                  Service request created successfully! Redirecting to your service requests...
                </Alert>
              )}
              
              <Formik
                initialValues={initialValues}
                validationSchema={validationSchema}
                onSubmit={handleSubmit}
                enableReinitialize={true}
              >
                {({ setFieldValue, values, errors, touched }) => (
                  <Form className="service-request-form">
                    <Row className="mb-3">
                      <Col md={6}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Property *</BootstrapForm.Label>
                          <Field
                            as="select"
                            name="property_id"
                            className={`form-select ${
                              errors.property_id && touched.property_id ? 'is-invalid' : ''
                            }`}
                            value={values.property_id}
                            onChange={(e) => handlePropertyChange(e, setFieldValue)}
                          >
                            <option value="">Select a property</option>
                            {properties.map((property) => (
                              <option key={property.id} value={property.id}>
                                {property.propertyName}
                              </option>
                            ))}
                          </Field>
                          <ErrorMessage
                            name="property_id"
                            component="div"
                            className="invalid-feedback"
                          />
                        </BootstrapForm.Group>
                      </Col>
                      
                      <Col md={6}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Equipment (Optional)</BootstrapForm.Label>
                          <Field
                            as="select"
                            name="equipment_id"
                            className={`form-select ${
                              errors.equipment_id && touched.equipment_id ? 'is-invalid' : ''
                            }`}
                            disabled={!values.property_id}
                          >
                            <option value="">Select equipment (optional)</option>
                            {equipment.map((item) => (
                              <option key={item.id} value={item.id}>
                                {item.nickname || item.model.name} ({item.model.manufacturerName})
                              </option>
                            ))}
                          </Field>
                          <ErrorMessage
                            name="equipment_id"
                            component="div"
                            className="invalid-feedback"
                          />
                          {values.property_id && equipment.length === 0 && (
                            <small className="text-muted">
                              No equipment found for this property. You can still request general service.
                            </small>
                          )}
                        </BootstrapForm.Group>
                      </Col>
                    </Row>
                    
                    <Row className="mb-3">
                      <Col md={6}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Service Type *</BootstrapForm.Label>
                          <Field
                            as="select"
                            name="service_type"
                            className={`form-select ${
                              errors.service_type && touched.service_type ? 'is-invalid' : ''
                            }`}
                          >
                            <option value="repair">Repair</option>
                            <option value="maintenance">Maintenance</option>
                            <option value="installation">Installation</option>
                            <option value="inspection">Inspection</option>
                          </Field>
                          <ErrorMessage
                            name="service_type"
                            component="div"
                            className="invalid-feedback"
                          />
                        </BootstrapForm.Group>
                      </Col>
                      
                      <Col md={6}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Priority *</BootstrapForm.Label>
                          <Field
                            as="select"
                            name="priority"
                            className={`form-select ${
                              errors.priority && touched.priority ? 'is-invalid' : ''
                            }`}
                          >
                            <option value="low">Low - No rush</option>
                            <option value="medium">Medium - Standard service</option>
                            <option value="high">High - Needs attention soon</option>
                            <option value="emergency">Emergency - Urgent service needed</option>
                          </Field>
                          <ErrorMessage
                            name="priority"
                            component="div"
                            className="invalid-feedback"
                          />
                        </BootstrapForm.Group>
                      </Col>
                    </Row>
                    
                    <BootstrapForm.Group className="mb-3">
                      <BootstrapForm.Label>Description *</BootstrapForm.Label>
                      <Field
                        as="textarea"
                        name="description"
                        rows={4}
                        className={`form-control ${
                          errors.description && touched.description ? 'is-invalid' : ''
                        }`}
                        placeholder="Please describe the issue or service needed in detail..."
                      />
                      <ErrorMessage
                        name="description"
                        component="div"
                        className="invalid-feedback"
                      />
                      <small className="form-text text-muted">
                        Include as much detail as possible to help the technician prepare for your service.
                      </small>
                    </BootstrapForm.Group>
                    
                    <Row className="mb-3">
                      <Col md={4}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Preferred Date (Optional)</BootstrapForm.Label>
                          <div>
                            <DatePicker
                              selected={values.preferred_date}
                              onChange={(date) => setFieldValue('preferred_date', date)}
                              dateFormat="yyyy-MM-dd"
                              minDate={new Date()}
                              className={`form-control ${
                                errors.preferred_date && touched.preferred_date ? 'is-invalid' : ''
                              }`}
                              placeholderText="Click to select a date"
                            />
                          </div>
                          <ErrorMessage
                            name="preferred_date"
                            component="div"
                            className="invalid-feedback"
                          />
                        </BootstrapForm.Group>
                      </Col>
                      
                      <Col md={4}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Preferred Start Time</BootstrapForm.Label>
                          <Field
                            type="time"
                            name="preferred_time_start"
                            className={`form-control ${
                              errors.preferred_time_start && touched.preferred_time_start
                                ? 'is-invalid'
                                : ''
                            }`}
                            disabled={!values.preferred_date}
                          />
                          <ErrorMessage
                            name="preferred_time_start"
                            component="div"
                            className="invalid-feedback"
                          />
                        </BootstrapForm.Group>
                      </Col>
                      
                      <Col md={4}>
                        <BootstrapForm.Group>
                          <BootstrapForm.Label>Preferred End Time</BootstrapForm.Label>
                          <Field
                            type="time"
                            name="preferred_time_end"
                            className={`form-control ${
                              errors.preferred_time_end && touched.preferred_time_end
                                ? 'is-invalid'
                                : ''
                            }`}
                            disabled={!values.preferred_date || !values.preferred_time_start}
                          />
                          <ErrorMessage
                            name="preferred_time_end"
                            component="div"
                            className="invalid-feedback"
                          />
                        </BootstrapForm.Group>
                      </Col>
                    </Row>
                    
                    <div className="d-flex justify-content-between mt-4">
                      <Button
                        variant="secondary"
                        onClick={() => navigate(-1)}
                        disabled={submitting}
                      >
                        Cancel
                      </Button>
                      
                      <Button
                        variant="primary"
                        type="submit"
                        disabled={submitting}
                      >
                        {submitting ? (
                          <>
                            <Spinner
                              as="span"
                              animation="border"
                              size="sm"
                              role="status"
                              aria-hidden="true"
                              className="me-2"
                            />
                            Submitting...
                          </>
                        ) : (
                          'Submit Service Request'
                        )}
                      </Button>
                    </div>
                  </Form>
                )}
              </Formik>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </Container>
  );
};

export default ServiceRequestForm;