import React, { useState, useEffect } from 'react';
import { 
  Container, 
  Row, 
  Col, 
  Card, 
  Badge, 
  Button, 
  Spinner, 
  Alert, 
  Form,
  Tabs,
  Tab,
  Modal
} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faWrench, 
  faSearch, 
  faFilter, 
  faPlus, 
  faCalendarAlt, 
  faHome, 
  faInfoCircle,

  faExclamationTriangle
} from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import qs from 'query-string';

const ServiceRequestList = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const queryParams = qs.parse(location.search);
  
  // State
  const [serviceRequests, setServiceRequests] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [filters, setFilters] = useState({
    status: queryParams.status || 'all',
    property_id: queryParams.property_id || '',
    service_type: queryParams.service_type || 'all',
    priority: queryParams.priority || 'all'
  });
  const [statusCounts, setStatusCounts] = useState({});
  const [filterOptions, setFilterOptions] = useState({
    status: [],
    service_type: [],
    priority: []
  });
  const [properties, setProperties] = useState([]);
  const [showFilterModal, setShowFilterModal] = useState(false);
  const [cancelRequestId, setCancelRequestId] = useState(null);
  const [showCancelModal, setShowCancelModal] = useState(false);
  const [cancelReason, setCancelReason] = useState('');
  const [cancelling, setCancelling] = useState(false);
  
  // Load service requests
  useEffect(() => {
    fetchServiceRequests();
    // Load user properties for filtering
    fetchUserProperties();
  }, []);
  
  // Update URL when filters change
  useEffect(() => {
    const queryString = qs.stringify({
      ...filters,
      status: filters.status !== 'all' ? filters.status : undefined,
      property_id: filters.property_id || undefined,
      service_type: filters.service_type !== 'all' ? filters.service_type : undefined,
      priority: filters.priority !== 'all' ? filters.priority : undefined
    });
    
    navigate({
      pathname: location.pathname,
      search: queryString ? `?${queryString}` : ''
    }, { replace: true });
    
    // Reload data when filters change
    fetchServiceRequests();
  }, [filters]);
  
  const fetchServiceRequests = async () => {
    setLoading(true);
    setError(null);
    
    try {
      // Build query params
      const queryParams = {
        ...filters,
        status: filters.status !== 'all' ? filters.status : undefined,
        property_id: filters.property_id || undefined,
        service_type: filters.service_type !== 'all' ? filters.service_type : undefined,
        priority: filters.priority !== 'all' ? filters.priority : undefined
      };
      
      const response = await axios.get('/api/v1/service-requests', {
        params: queryParams
      });
      
      setServiceRequests(response.data.data);
      setStatusCounts(response.data.counts || {});
      setFilterOptions(response.data.filter_options || {
        status: [],
        service_type: [],
        priority: []
      });
    } catch (err) {
      setError('Failed to load service requests. Please try again.');
      console.error('Error fetching service requests:', err);
    } finally {
      setLoading(false);
    }
  };
  
  const fetchUserProperties = async () => {
    try {
      const response = await axios.get('/api/v1/properties');
      setProperties(response.data.data || []);
    } catch (err) {
      console.error('Error fetching properties:', err);
    }
  };
  
  const handleTabChange = (status) => {
    setFilters(prev => ({ ...prev, status }));
  };
  
  const handleFilterChange = (field, value) => {
    setFilters(prev => ({ ...prev, [field]: value }));
  };
  
  const resetFilters = () => {
    setFilters({
      status: 'all',
      property_id: '',
      service_type: 'all',
      priority: 'all'
    });
    setShowFilterModal(false);
  };
  
  const handleCancelRequest = (requestId) => {
    setCancelRequestId(requestId);
    setShowCancelModal(true);
  };
  
  const confirmCancelRequest = async () => {
    if (!cancelRequestId) return;
    
    setCancelling(true);
    
    try {
      await axios.put(`/api/v1/service-requests/${cancelRequestId}`, {
        status: 'cancelled',
        technician_notes: cancelReason || 'Cancelled by homeowner'
      });
      
      // Close modal and reset state
      setShowCancelModal(false);
      setCancelRequestId(null);
      setCancelReason('');
      
      // Refresh data
      fetchServiceRequests();
    } 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}>{text}</Badge>;
  };
  
  // Render priority badge
  const renderPriorityBadge = (priority) => {
    const priorityMap = {
      'low': { variant: 'success', text: 'Low' },
      'medium': { variant: 'info', text: 'Medium' },
      'high': { variant: 'warning', text: 'High' },
      'emergency': { variant: 'danger', text: 'Emergency' }
    };
    
    const { variant, text } = priorityMap[priority] || { variant: 'secondary', text: priority };
    
    return <Badge bg={variant}>{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}>{text}</Badge>;
  };
  
  if (loading && serviceRequests.length === 0) {
    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 your service requests...</p>
        </div>
      </Container>
    );
  }
  
  return (
    <Container className="py-4">
      <div className="d-flex justify-content-between align-items-center mb-4">
        <h2>
          <FontAwesomeIcon icon={faWrench} className="me-2" />
          My Service Requests
        </h2>
        
        <div className="d-flex">
          <Button 
            variant="outline-secondary" 
            className="me-2"
            onClick={() => setShowFilterModal(true)}
          >
            <FontAwesomeIcon icon={faFilter} className="me-2" />
            Filter
          </Button>
          
          <Button 
            variant="primary"
            onClick={() => navigate('/service-requests/new')}
          >
            <FontAwesomeIcon icon={faPlus} className="me-2" />
            New Request
          </Button>
        </div>
      </div>
      
      {error && (
        <Alert variant="danger" dismissible onClose={() => setError(null)}>
          <FontAwesomeIcon icon={faExclamationTriangle} className="me-2" />
          {error}
        </Alert>
      )}
      
      <Card className="mb-4 shadow-sm">
        <Card.Header className="bg-white">
          <Tabs
            activeKey={filters.status}
            onSelect={handleTabChange}
            className="nav-justified"
            variant="pills"
          >
            <Tab 
              eventKey="all" 
              title={`All (${statusCounts.all || 0})`}
            />
            <Tab 
              eventKey="pending" 
              title={`Pending (${statusCounts.pending || 0})`}
            />
            <Tab 
              eventKey="assigned" 
              title={`Assigned (${statusCounts.assigned || 0})`}
            />
            <Tab 
              eventKey="scheduled" 
              title={`Scheduled (${statusCounts.scheduled || 0})`}
            />
            <Tab 
              eventKey="in_progress" 
              title={`In Progress (${statusCounts.in_progress || 0})`}
            />
            <Tab 
              eventKey="completed" 
              title={`Completed (${statusCounts.completed || 0})`}
            />
          </Tabs>
        </Card.Header>
        
        <Card.Body>
          {serviceRequests.length === 0 ? (
            <div className="text-center py-5">
              <FontAwesomeIcon icon={faInfoCircle} size="3x" className="text-muted mb-3" />
              <h4>No Service Requests Found</h4>
              <p className="text-muted">
                {filters.status === 'all'
                  ? "You haven't created any service requests yet."
                  : `You don't have any ${filters.status} service requests.`}
              </p>
              <Button 
                variant="primary"
                onClick={() => navigate('/service-requests/new')}
                className="mt-2"
              >
                <FontAwesomeIcon icon={faPlus} className="me-2" />
                Create Your First Request
              </Button>
            </div>
          ) : (
            <div className="service-request-list">
              {serviceRequests.map(request => (
                <Card key={request.id} className="mb-3 border-light shadow-sm">
                  <Card.Body>
                    <Row>
                      <Col md={8}>
                        <h5 className="mb-2">
                          <Link 
                            to={`/service-requests/${request.id}`}
                            className="text-decoration-none text-dark"
                          >
                            {renderServiceTypeBadge(request.service_type)} 
                            {request.equipment ? request.equipment.name : 'General Service'}
                          </Link>
                        </h5>
                        
                        <p className="mb-2">{request.description.substring(0, 150)}...</p>
                        
                        <div className="d-flex flex-wrap gap-3 mb-2">
                          <div className="d-flex align-items-center">
                            <FontAwesomeIcon icon={faHome} className="text-muted me-2" />
                            <span>{request.property.name}</span>
                          </div>
                          
                          {request.preferred_date && (
                            <div className="d-flex align-items-center">
                              <FontAwesomeIcon icon={faCalendarAlt} className="text-muted me-2" />
                              <span>{request.preferred_date} {request.preferred_time_window && `(${request.preferred_time_window})`}</span>
                            </div>
                          )}
                        </div>
                      </Col>
                      
                      <Col md={4} className="d-flex flex-column align-items-end justify-content-between">
                        <div className="d-flex gap-2 mb-3">
                          {renderStatusBadge(request.status)}
                          {renderPriorityBadge(request.priority)}
                        </div>
                        
                        <div className="d-flex flex-column align-items-end">
                          <small className="text-muted mb-2">
                            Created: {new Date(request.created_at).toLocaleDateString()}
                          </small>
                          
                          <div className="d-flex gap-2">
                            <Button
                              variant="outline-primary"
                              size="sm"
                              as={Link}
                              to={`/service-requests/${request.id}`}
                            >
                              View Details
                            </Button>
                            
                            {request.meta.can_cancel && (
                              <Button
                                variant="outline-danger"
                                size="sm"
                                onClick={() => handleCancelRequest(request.id)}
                              >
                                Cancel
                              </Button>
                            )}
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </Card.Body>
                </Card>
              ))}
            </div>
          )}
        </Card.Body>
      </Card>
      
      {/* Filter Modal */}
      <Modal show={showFilterModal} onHide={() => setShowFilterModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Filter Service Requests</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group className="mb-3">
              <Form.Label>Property</Form.Label>
              <Form.Select
                value={filters.property_id}
                onChange={(e) => handleFilterChange('property_id', e.target.value)}
              >
                <option value="">All Properties</option>
                {properties.map(property => (
                  <option key={property.id} value={property.id}>
                    {property.propertyName}
                  </option>
                ))}
              </Form.Select>
            </Form.Group>
            
            <Form.Group className="mb-3">
              <Form.Label>Service Type</Form.Label>
              <Form.Select
                value={filters.service_type}
                onChange={(e) => handleFilterChange('service_type', e.target.value)}
              >
                {filterOptions.service_type.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </Form.Select>
            </Form.Group>
            
            <Form.Group className="mb-3">
              <Form.Label>Priority</Form.Label>
              <Form.Select
                value={filters.priority}
                onChange={(e) => handleFilterChange('priority', e.target.value)}
              >
                {filterOptions.priority.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </Form.Select>
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={resetFilters}>
            Reset Filters
          </Button>
          <Button variant="primary" onClick={() => setShowFilterModal(false)}>
            Apply Filters
          </Button>
        </Modal.Footer>
      </Modal>
      
      {/* 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 ServiceRequestList;