import React, { useState } from 'react';

interface AlertManagerProps {
  alerts: Array<{ price: number; label: string }>;
  onAdd: (price: number, label: string) => void;
  onRemove: (price: number) => void;
  onClose: () => void;
  currentPrice: number;
}

const AlertManager: React.FC<AlertManagerProps> = ({ alerts, onAdd, onRemove, onClose, currentPrice }) => {
  const [priceInput, setPriceInput] = useState(currentPrice.toFixed(2));
  const [labelInput, setLabelInput] = useState('');

  const handleAdd = () => {
    const price = parseFloat(priceInput);
    if (!isNaN(price) && price > 0) {
      onAdd(price, labelInput.trim());
      setLabelInput('');
    }
  };

  return (
    <div className="alert-panel">
      <div className="alert-header">
        <span className="alert-title">🔔 가격 알림</span>
        <button className="alert-close" onClick={onClose}>✕</button>
      </div>
      <div className="alert-add">
        <input
          className="alert-input"
          type="number"
          value={priceInput}
          onChange={e => setPriceInput(e.target.value)}
          placeholder="가격"
        />
        <input
          className="alert-input"
          value={labelInput}
          onChange={e => setLabelInput(e.target.value)}
          placeholder="메모 (선택)"
        />
        <button className="alert-add-btn" onClick={handleAdd}>추가</button>
      </div>
      <div className="alert-body">
        {alerts.length === 0 && <div className="alert-empty">설정된 알림 없음</div>}
        {alerts.map((a, i) => (
          <div key={i} className="alert-item">
            <span className="alert-price">{a.price.toFixed(2)}</span>
            {a.label && <span className="alert-label">{a.label}</span>}
            <button className="alert-remove" onClick={() => onRemove(a.price)}>✕</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AlertManager;