import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { 
  Card, 
  CardHeader, 
  CardBody, 
  CardFooter,
  Row,
  Col,
  Table,
  Badge,
  Button,
  Spinner,
  Alert,
  Tabs,
  Tab,
  Modal
} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faEdit, 
  faTrash, 
  faWrench, 
  faInfoCircle, 
  faHistory, 
  faFileAlt, 
  faExclamationTriangle 
} from '@fortawesome/free-solid-svg-icons';
import ServiceHistoryList from './ServiceHistoryList';
import DocumentList from './DocumentList';

const EquipmentDetails = () => {
  const { propertyId, equipmentId } = useParams();
  const navigate = useNavigate();
  
  const [equipment, setEquipment] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('details');
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  
  useEffect(() => {
    const fetchEquipmentDetails = async () => {
      try {
        setLoading(true);
        const response = await axios.get(`/api/v1/properties/${propertyId}/equipment/${equipmentId}`);
        setEquipment(response.data.data);
        setError(null);
      } catch (err) {
        setError(err.response?.data?.message || 'Failed to load equipment details');
      } finally {
        setLoading(false);
      }
    };
    
    fetchEquipmentDetails();
  }, [propertyId, equipmentId]);
  
  const handleEdit = () => {
    navigate(`/properties/${propertyId}/equipment/${equipmentId}/edit`);
  };
  
  const handleServiceRequest = () => {
    navigate(`/properties/${propertyId}/equipment/${equipmentId}/service-request`);
  };
  
  const handleDelete = async () => {
    try {
      await axios.delete(`/api/v1/properties/${propertyId}/equipment/${equipmentId}`);
      setShowDeleteModal(false);
      navigate(`/properties/${propertyId}/equipment`);
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to delete equipment');
      setShowDeleteModal(false);
    }
  };
  
  const renderStatusBadge = (status) => {
    const statusMap = {
      'operational': { variant: 'success', label: 'Operational' },
      'needs_maintenance': { variant: 'warning', label: 'Needs Maintenance' },
      'out_of_service': { variant: 'danger', label: 'Out of Service' }
    };
    
    const { variant, label } = statusMap[status] || { variant: 'secondary', label: status };
    
    return <Badge bg={variant}>{label}</Badge>;
  };
  
  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 (error) {
    return (
      <Alert variant="danger">
        <FontAwesomeIcon icon={faExclamationTriangle} className="me-2" />
        {error}
      </Alert>
    );
  }
  
  if (!equipment) {
    return (
      <Alert variant="info">
        <FontAwesomeIcon icon={faInfoCircle} className="me-2" />
        Equipment not found
      </Alert>
    );
  }
  
  return (
    <div className="equipment-details">
      <Card className="mb-4 shadow-sm">
        <CardHeader className="bg-primary text-white d-flex justify-content-between align-items-center">
          <h3 className="mb-0">{equipment.nickname || equipment.model.name}</h3>
          <div>
            <Button variant="light" size="sm" className="me-2" onClick={handleEdit}>
              <FontAwesomeIcon icon={faEdit} className="me-1" /> Edit
            </Button>
            <Button variant="danger" size="sm" onClick={() => setShowDeleteModal(true)}>
              <FontAwesomeIcon icon={faTrash} className="me-1" /> Delete
            </Button>
          </div>
        </CardHeader>
        
        <CardBody>
          <Tabs
            activeKey={activeTab}
            onSelect={(k) => setActiveTab(k)}
            className="mb-4"
          >
            <Tab eventKey="details" title="Details">
              <Row>
                <Col md={6}>
                  <Table bordered responsive>
                    <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>Category</th>
                        <td>{equipment.model.categoryName}</td>
                      </tr>
                      <tr>
                        <th>Serial Number</th>
                        <td>{equipment.serialNumber || 'N/A'}</td>
                      </tr>
                      <tr>
                        <th>Status</th>
                        <td>{renderStatusBadge(equipment.status)}</td>
                      </tr>
                      <tr>
                        <th>Location</th>
                        <td>{equipment.locationInProperty || 'N/A'}</td>
                      </tr>
                    </tbody>
                  </Table>
                </Col>
                <Col md={6}>
                  <Table bordered responsive>
                    <tbody>
                      <tr>
                        <th>Installation Date</th>
                        <td>{equipment.installationDate || 'N/A'}</td>
                      </tr>
                      <tr>
                        <th>Warranty Expiry</th>
                        <td>{equipment.warrantyExpiry || 'N/A'}</td>
                      </tr>
                      <tr>
                        <th>Purchase Date</th>
                        <td>{equipment.purchaseDate || 'N/A'}</td>
                      </tr>
                      <tr>
                        <th>Purchase Price</th>
                        <td>{equipment.purchasePrice ? `${equipment.purchasePrice}` : 'N/A'}</td>
                      </tr>
                      <tr>
                        <th>Seller</th>
                        <td>{equipment.sellerName || 'N/A'}</td>
                      </tr>
                      <tr>
                        <th>Last Serviced</th>
                        <td>{equipment.lastServicedDate || 'N/A'}</td>
                      </tr>
                    </tbody>
                  </Table>
                </Col>
              </Row>
              
              {equipment.notes && (
                <div className="mt-3">
                  <h5>Notes</h5>
                  <p className="bg-light p-3 rounded">{equipment.notes}</p>
                </div>
              )}
              
              {equipment.specifications && equipment.specifications.length > 0 && (
                <div className="mt-4">
                  <h5>Specifications</h5>
                  <Table bordered responsive>
                    <thead className="bg-light">
                      <tr>
                        <th>Specification</th>
                        <th>Value</th>
                      </tr>
                    </thead>
                    <tbody>
                      {equipment.specifications.map((spec) => (
                        <tr key={spec.specId}>
                          <td>{spec.specName}</td>
                          <td>{spec.specValue} {spec.specUnit}</td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </div>
              )}
            </Tab>
            
            <Tab eventKey="service-history" title="Service History">
              <ServiceHistoryList serviceHistory={equipment.serviceHistory || []} />
            </Tab>
            
            <Tab eventKey="documentation" title="Documentation">
              <DocumentList modelId={equipment.modelId} equipmentId={equipment.id} />
            </Tab>
          </Tabs>
        </CardBody>
        
        <CardFooter className="bg-white d-flex justify-content-between">
          <Button
            variant="outline-secondary"
            onClick={() => navigate(`/properties/${propertyId}/equipment`)}
          >
            Back to Equipment List
          </Button>
          <Button 
            variant="primary"
            onClick={handleServiceRequest}
          >
            <FontAwesomeIcon icon={faWrench} className="me-2" />
            Request Service
          </Button>
        </CardFooter>
      </Card>
      
      {/* Delete Confirmation Modal */}
      <Modal show={showDeleteModal} onHide={() => setShowDeleteModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Confirm Deletion</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Are you sure you want to delete this equipment? 
          This action cannot be undone and will remove all service history.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowDeleteModal(false)}>
            Cancel
          </Button>
          <Button variant="danger" onClick={handleDelete}>
            Delete Equipment
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default EquipmentDetails;