import React from 'react';
import { Card } from 'react-bootstrap';
import type { Radio } from '../types/radio.types';
import { getDeviceImageURL } from '../libs/deviceImageMapper';
import './RadioCard.scss';

interface RadioCardProps {
  radio: Radio;
}

export const RadioCard: React.FC<RadioCardProps> = ({ radio }) => {
  const deviceImageURL = getDeviceImageURL(radio.protocol, radio.manufacturer, radio.device);

  return (
    <Card className="radio-card">
      <Card.Header className="radio-card-header">
        <div className="radio-card-image-container">
          <img
            src={deviceImageURL}
            alt={`${radio.manufacturer || 'Unknown'} ${radio.device || ''}`}
            className="radio-card-device-image"
            onError={(e) => {
              (e.target as HTMLImageElement).src = '/image/device/unknown.png';
            }}
          />
        </div>
      </Card.Header>
      <Card.Body className="radio-card-body">
        <Card.Title className="radio-card-title">{radio.name}</Card.Title>
        <div className="radio-card-details">
          <div className="radio-card-row">
            <span className="radio-card-label">Frequency:</span>
            <span className="radio-card-value">{radio.frequency.toFixed(2)} MHz</span>
          </div>
          <div className="radio-card-row">
            <span className="radio-card-label">Bandwidth:</span>
            <span className="radio-card-value">{radio.bandwidth.toFixed(2)} kHz</span>
          </div>
          <div className="radio-card-row">
            <span className="radio-card-label">Modulation:</span>
            <span className="radio-card-value">{radio.modulation}</span>
          </div>
          <div className="radio-card-row">
            <span className="radio-card-label">Protocol:</span>
            <span className="radio-card-value">{radio.protocol}</span>
          </div>
          {(radio.lora_sf !== undefined || radio.lora_cr !== undefined) && (
            <>
              {radio.lora_sf !== undefined && (
                <div className="radio-card-row">
                  <span className="radio-card-label">LoRa SF:</span>
                  <span className="radio-card-value">{radio.lora_sf}</span>
                </div>
              )}
              {radio.lora_cr !== undefined && (
                <div className="radio-card-row">
                  <span className="radio-card-label">LoRa CR:</span>
                  <span className="radio-card-value">{radio.lora_cr}</span>
                </div>
              )}
            </>
          )}
          <div className="radio-card-status">
            <span className={`radio-card-status-badge ${radio.is_online ? 'online' : 'offline'}`}>
              {radio.is_online ? '🟢 Online' : '🔴 Offline'}
            </span>
          </div>
        </div>
      </Card.Body>
    </Card>
  );
};

export default RadioCard;
