import React, { useState, useEffect } from 'react';
import { 
  Container, 
  Row, 
  Col, 
  Card, 
  Badge, 
  Button, 
  Spinner, 
  Alert, 
  ListGroup,
  Modal,
  Form,
  Breadcrumb,
  Table
} from 'react-bootstrap';
import { Link, useParams, useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faWrench, 
  faHome, 
  faCalendarAlt, 
  faUser, 
  faInfoCircle, 
  faExclamationTriangle,
  faEdit,
  faTimes,
  faCheckCircle,
  faHistory,
  faComments,
  faClock,
  faMapMarkerAlt
} from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';

const ServiceRequestDetail = () => {
  const { requestId } = useParams();
  const navigate = useNavigate();
  
  const [serviceRequest, setServiceRequest] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [showCancelModal, setShowCancelModal] = useState(false);
  const [cancelReason, setCancelReason] = useState('');
  const [cancelling, setCancelling] = useState(false);
  
  useEffect(() => {
    // Load service request details
    const fetchServiceRequestDetails = async () => {
      setLoading(true);
      setError(null);
      
      try {
        const response = await axios.get(`/api/v1/service-requests/${requestId}`);
        setServiceRequest(response.data.data);
      } catch (err) {
        setError('Failed to load service request details. Please try again.');
        console.error('Error fetching service request:', err);
      } finally {
        setLoading(false);
      }
    };
    
    fetchServiceRequestDetails();
  }, [requestId]);
  
  const handleCancelRequest = () => {
    setShowCancelModal(true);
  };
  
  const confirmCancelRequest = async () => {
    setCancelling(true);
    
    try {
      await axios.put(`/api/v1/service-requests/${requestId}`, {
        status: 'cancelled',
        technician_notes: cancelReason || 'Cancelled by homeowner'
      });
      
      // Close modal and refresh data
      setShowCancelModal(false);
      setCancelReason('');
      
      // Reload service request details
      const response = await axios.get(`/api/v1/service-requests/${requestId}`);
      setServiceRequest(response.data.data);
    } catch (err) {
      setError('Failed to cancel service request. Please try again.');
      console.error('Error cancelling service request:', err);
    } finally {
      setCancelling(false);
    }
  };
  
  // Render status badge
  const renderStatusBadge = (status) => {
    const statusMap = {
      'pending': { bg: 'secondary', text: 'Pending' },
      'assigned': { bg: 'info', text: 'Assigned' },
      'scheduled': { bg: 'primary', text: 'Scheduled' },
      'in_progress': { bg: 'warning', text: 'In Progress' },
      'completed': { bg: 'success', text: 'Completed' },
      'cancelled': { bg: 'danger', text: 'Cancelled' }
    };
    
    const { bg, text } = statusMap[status] || { bg: 'secondary', text: status };
    
    return <Badge bg={bg} className="p-2 fs-6">{text}</Badge>;
  };
  
  // Render priority badge
  const renderPriorityBadge = (priority) => {
    const priorityMap = {
      'low': { variant: 'success', text: 'Low Priority' },
      'medium': { variant: 'info', text: 'Medium Priority' },
      'high': { variant: 'warning', text: 'High Priority' },
      'emergency': { variant: 'danger', text: 'Emergency' }
    };
    
    const { variant, text } = priorityMap[priority] || { variant: 'secondary', text: priority };
    
    return <Badge bg={variant} className="p-2 fs-6">{text}</Badge>;
  };
  
  // Render service type badge
  const renderServiceTypeBadge = (serviceType) => {
    const serviceTypeMap = {
      'repair': { variant: 'danger', text: 'Repair' },
      'maintenance': { variant: 'primary', text: 'Maintenance' },
      'installation': { variant: 'success', text: 'Installation' },
      'inspection': { variant: 'info', text: 'Inspection' }
    };
    
    const { variant, text } = serviceTypeMap[serviceType] || { variant: 'secondary', text: serviceType };
    
    return <Badge bg={variant} className="p-2 fs-6">{text}</Badge>;
  };
  
  if (loading) {
    return (
      <Container className="py-4">
        <div className="text-center my-5">
          <Spinner animation="border" role="status">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
          <p className="mt-2">Loading service request details...</p>
        </div>
      </Container>
    );
  }
  
  if (error) {
    return (
      <Container className="py-4">
        <Alert variant="danger">
          <FontAwesomeIcon icon={faExclamationTriangle} className="me-2" />
          {error}
        </Alert>
        <div className="text-center mt-3">
          <Button 
            variant="primary"
            onClick={() => navigate('/service-requests')}
          >
            Back to Service Requests
          </Button>
        </div>
      </Container>
    );
  }
  
  if (!serviceRequest) {
    return (
      <Container className="py-4">
        <Alert variant="warning">
          <FontAwesomeIcon icon={faInfoCircle} className="me-2" />
          Service request not found or you don't have permission to view it.
        </Alert>
        <div className="text-center mt-3">
          <Button 
            variant="primary"
            onClick={() => navigate('/service-requests')}
          >
            Back to Service Requests
          </Button>
        </div>
      </Container>
    );
  }
  
  return (
    <Container className="py-4">
      <Breadcrumb className="mb-4">
        <Breadcrumb.Item linkAs={Link} linkProps={{ to: "/" }}>Home</Breadcrumb.Item>
        <Breadcrumb.Item linkAs={Link} linkProps={{ to: "/service-requests" }}>
          Service Requests
        </Breadcrumb.Item>
        <Breadcrumb.Item active>Request #{serviceRequest.id}</Breadcrumb.Item>
      </Breadcrumb>
      
      <Row className="mb-4">
        <Col lg={8}>
          <Card className="shadow-sm">
            <Card.Header className="bg-white d-flex justify-content-between align-items-center">
              <h2 className="mb-0">
                {renderServiceTypeBadge(serviceRequest.service_type)} 
                {serviceRequest.equipment ? serviceRequest.equipment.name : 'General Service'}
              </h2>
              
              <div className="d-flex gap-2">
                {renderStatusBadge(serviceRequest.status)}
                {renderPriorityBadge(serviceRequest.priority)}
              </div>
            </Card.Header>
            
            <Card.Body>
              <h5 className="fw-bold mb-3">Description</h5>
              <p className="lead">{serviceRequest.description}</p>
              
              {serviceRequest.technician_notes && (
                <div className="mt-4">
                  <h5 className="fw-bold mb-3">Technician Notes</h5>
                  <div className="bg-light p-3 rounded">
                    <p className="mb-0">{serviceRequest.technician_notes}</p>
                  </div>
                </div>
              )}
              
              <hr className="my-4" />
              
              <h5 className="fw-bold mb-3">Details</h5>
              <Table borderless>
                <tbody>
                  <tr>
                    <td width="200" className="text-muted">Request ID</td>
                    <td>#{serviceRequest.id}</td>
                  </tr>
                  <tr>
                    <td className="text-muted">Created On</td>
                    <td>{new Date(serviceRequest.created_at).toLocaleString()}</td>
                  </tr>
                  <tr>
                    <td className="text-muted">Last Updated</td>
                    <td>{new Date(serviceRequest.updated_at).toLocaleString()}</td>
                  </tr>
                  {serviceRequest.preferred_date && (
                    <tr>
                      <td className="text-muted">Preferred Date</td>
                      <td>
                        <FontAwesomeIcon icon={faCalendarAlt} className="me-2" />
                        {serviceRequest.preferred_date}
                        {serviceRequest.preferred_time_window && (
                          <span className="ms-2">({serviceRequest.preferred_time_window})</span>
                        )}
                      </td>
                    </tr>
                  )}
                </tbody>
              </Table>
            </Card.Body>
            
            <Card.Footer className="bg-white">
              <div className="d-flex gap-2 justify-content-between">
                <Button 
                  variant="secondary"
                  onClick={() => navigate('/service-requests')}
                >
                  Back to List
                </Button>
                
                <div className="d-flex gap-2">
                  {serviceRequest.meta.can_cancel && (
                    <Button 
                      variant="danger"
                      onClick={handleCancelRequest}
                    >
                      <FontAwesomeIcon icon={faTimes} className="me-2" />
                      Cancel Request
                    </Button>
                  )}
                  
                  {!serviceRequest.meta.is_completed && (
                    <Button 
                      variant="primary"
                      as={Link}
                      to={`/service-requests/${serviceRequest.id}/edit`}
                    >
                      <FontAwesomeIcon icon={faEdit} className="me-2" />
                      Edit Request
                    </Button>
                  )}
                </div>
              </div>
            </Card.Footer>
          </Card>
        </Col>
        
        <Col lg={4}>
          {/* Property Information */}
          <Card className="shadow-sm mb-4">
            <Card.Header className="bg-white">
              <h5 className="mb-0">
                <FontAwesomeIcon icon={faHome} className="me-2" />
                Property Information
              </h5>
            </Card.Header>
            <Card.Body>
              <h6 className="fw-bold">{serviceRequest.property.name}</h6>
              <p className="mb-2">
                <FontAwesomeIcon icon={faMapMarkerAlt} className="me-2 text-muted" />
                {serviceRequest.property.address}
              </p>
              <Link 
                to={`/properties/${serviceRequest.property_id}`}
                className="btn btn-sm btn-outline-primary"
              >
                View Property
              </Link>
            </Card.Body>
          </Card>
          
          {/* Equipment Information (if any) */}
          {serviceRequest.equipment && (
            <Card className="shadow-sm mb-4">
              <Card.Header className="bg-white">
                <h5 className="mb-0">
                  <FontAwesomeIcon icon={faWrench} className="me-2" />
                  Equipment Information
                </h5>
              </Card.Header>
              <Card.Body>
                <h6 className="fw-bold">{serviceRequest.equipment.name}</h6>
                <p className="mb-1">
                  <span className="text-muted">Model:</span> {serviceRequest.equipment.model}
                </p>
                <p className="mb-2">
                  <span className="text-muted">Manufacturer:</span> {serviceRequest.equipment.manufacturer}
                </p>
                <Link 
                  to={`/properties/${serviceRequest.property_id}/equipment/${serviceRequest.equipment_id}`}
                  className="btn btn-sm btn-outline-primary"
                >
                  View Equipment
                </Link>
              </Card.Body>
            </Card>
          )}
          
          {/* Technician Information (if assigned) */}
          {serviceRequest.technician && (
            <Card className="shadow-sm mb-4">
              <Card.Header className="bg-white">
                <h5 className="mb-0">
                  <FontAwesomeIcon icon={faUser} className="me-2" />
                  Assigned Technician
                </h5>
              </Card.Header>
              <Card.Body>
                <h6 className="fw-bold">{serviceRequest.technician.name}</h6>
                {/* More technician details would be displayed here */}
              </Card.Body>
            </Card>
          )}
          
          {/* Status Timeline */}
          <Card className="shadow-sm">
            <Card.Header className="bg-white">
              <h5 className="mb-0">
                <FontAwesomeIcon icon={faHistory} className="me-2" />
                Status Timeline
              </h5>
            </Card.Header>
            <ListGroup variant="flush">
              <ListGroup.Item className="d-flex justify-content-between align-items-start py-3">
                <div className="ms-2 me-auto">
                  <div className="fw-bold">Request Created</div>
                  <div className="text-muted">by {serviceRequest.requester.name}</div>
                </div>
                <small className="text-muted">
                  {new Date(serviceRequest.created_at).toLocaleString()}
                </small>
              </ListGroup.Item>
              
              {/* Additional timeline items would be dynamically generated based on service request history */}
              {serviceRequest.status !== 'pending' && (
                <ListGroup.Item className="d-flex justify-content-between align-items-start py-3">
                  <div className="ms-2 me-auto">
                    <div className="fw-bold">Status Updated</div>
                    <div className="text-muted">to {serviceRequest.status_display}</div>
                  </div>
                  <small className="text-muted">
                    {new Date(serviceRequest.updated_at).toLocaleString()}
                  </small>
                </ListGroup.Item>
              )}
            </ListGroup>
          </Card>
        </Col>
      </Row>
      
      {/* Cancel Confirmation Modal */}
      <Modal show={showCancelModal} onHide={() => setShowCancelModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Confirm Cancellation</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Are you sure you want to cancel this service request?</p>
          <Form.Group>
            <Form.Label>Reason for cancellation (optional)</Form.Label>
            <Form.Control
              as="textarea"
              rows={3}
              value={cancelReason}
              onChange={(e) => setCancelReason(e.target.value)}
              placeholder="Please provide a reason for cancellation..."
            />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowCancelModal(false)}>
            Keep Request
          </Button>
          <Button 
            variant="danger" 
            onClick={confirmCancelRequest}
            disabled={cancelling}
          >
            {cancelling ? (
              <>
                <Spinner
                  as="span"
                  animation="border"
                  size="sm"
                  role="status"
                  aria-hidden="true"
                  className="me-2"
                />
                Cancelling...
              </>
            ) : (
              'Cancel Request'
            )}
          </Button>
        </Modal.Footer>
      </Modal>
    </Container>
  );
};

export default ServiceRequestDetail;