import React from 'react';
import { useInventoryStore } from '../store/inventoryStore';
import { formatItemName } from '../utils/itemUtils';
import ItemIcon from './ItemIcon';
import './AlertsPanel.css';

function AlertsPanel() {
  const alerts = useInventoryStore((state) => state.alerts);

  return (
    <div className="alerts-panel">
      <div className="alerts-header">
        <h2>🔔 Low-Stock Alerts</h2>
        <span className="alert-count">
          {alerts.length} alert{alerts.length !== 1 ? 's' : ''}
        </span>
      </div>

      {alerts.length > 0 ? (
        <div className="alert-list">
          {alerts.map((alert, idx) => (
            <div key={idx} className={`alert-card ${alert.triggered ? 'triggered' : 'ok'}`}>
              <div className="alert-icon">
                {alert.triggered ? '🔴' : '🟢'}
              </div>
              <div className="alert-info">
                <div className="alert-item-row">
                  <ItemIcon itemName={alert.item} size={20} />
                  <span className="alert-item-name">{formatItemName(alert.item)}</span>
                </div>
                <div className="alert-details">
                  <span className="alert-stock">
                    Stock: <strong>{alert.current ?? '?'}</strong>
                  </span>
                  <span className="alert-threshold">
                    Min: <strong>{alert.threshold || alert.min || '?'}</strong>
                  </span>
                </div>
              </div>
              <div className={`alert-badge ${alert.triggered ? 'low' : 'ok'}`}>
                {alert.triggered ? 'LOW' : 'OK'}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="no-alerts">
          <span className="no-alerts-icon">✅</span>
          <span>No alerts configured or all stock levels are OK</span>
        </div>
      )}
    </div>
  );
}

export default AlertsPanel;