import { useNavigate } from 'react-router-dom';
import { useAlerts } from '../hooks/useAlerts';
import { formatPrice } from '../utils/format';

export default function AlertsPage() {
  const navigate = useNavigate();
  const { alerts, loading, deleteAlert } = useAlerts();

  return (
    <div className="portfolio-page">
      <h2 className="portfolio-title">Price Alerts</h2>

      {loading && alerts.length === 0 && (
        <div className="portfolio-loading">
          {Array.from({ length: 3 }, (_, i) => (
            <div key={i} className="position-card">
              <div className="skeleton-line" style={{ width: '60%', height: 16 }} />
              <div className="skeleton-line" style={{ width: '40%', height: 14, marginTop: 8 }} />
            </div>
          ))}
        </div>
      )}

      {!loading && alerts.length === 0 && (
        <div className="portfolio-empty">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="36" height="36">
            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.73 21a2 2 0 01-3.46 0" />
          </svg>
          <p>No alerts yet</p>
          <button className="page-btn" onClick={() => navigate('/screener')}>
            Find markets to watch
          </button>
        </div>
      )}

      {alerts.length > 0 && (
        <div className="positions-list">
          {alerts.map(alert => {
            const currentPrice = alert.side === 'yes' ? alert.yes_price : alert.no_price;
            return (
              <div
                key={alert.id}
                className={`position-card ${alert.triggered ? 'alert-triggered' : ''}`}
                onClick={() => navigate(`/market/${alert.market_id}`)}
              >
                <div className="pos-header">
                  <div className="pos-title-row">
                    {alert.image_url && (
                      <img src={alert.image_url} alt="" className="pos-icon"
                        onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
                      />
                    )}
                    <div className="pos-title-text">
                      <span className="pos-title">{alert.question}</span>
                      <span className={`pos-outcome pos-outcome-${alert.side}`}>
                        {alert.side.toUpperCase()}
                      </span>
                    </div>
                  </div>
                  <button
                    className="pos-redeem-btn"
                    onClick={(e) => { e.stopPropagation(); deleteAlert(alert.id); }}
                  >
                    Delete
                  </button>
                </div>

                <div className="pos-stats">
                  <div className="pos-stat">
                    <span className="pos-stat-label">Condition</span>
                    <span className="pos-stat-value">
                      {alert.direction === 'above' ? '>' : '<'} {formatPrice(alert.threshold)}
                    </span>
                  </div>
                  <div className="pos-stat">
                    <span className="pos-stat-label">Current</span>
                    <span className="pos-stat-value">{formatPrice(currentPrice)}</span>
                  </div>
                  <div className="pos-stat">
                    <span className="pos-stat-label">Status</span>
                    <span className={`pos-stat-value ${alert.triggered ? 'text-profit' : ''}`}>
                      {alert.triggered ? 'Triggered' : 'Watching'}
                    </span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}