import React, { useEffect, useState } from "react";
import axios from "axios";

function Ribbon() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  const loadData = async () => {
    try {
      const res = await axios.get("http://127.0.0.1:8000/api/scanner/ribbon");
      setData(res.data || []);
      setLoading(false);
    } catch (err) {
      console.error("Ribbon error:", err);
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
    const interval = setInterval(loadData, 100000);
    return () => clearInterval(interval);
  }, []);

  const openChart = (symbol) => {
    window.open(`https://www.tradingview.com/chart/?symbol=NSE:${symbol}`, "_blank");
  };

  if (loading) return <div className="glass-card" style={{ textAlign: "center" }}>Loading Ribbon...</div>;

  return (
    <div className="glass-card animate-fade-in">
      <h2 className="text-blue">📈 EMA Ribbon Strategy</h2>
      <div className="data-table-container">
        <table className="data-table">
          <thead>
            <tr>
              <th>Stock</th>
              <th>Price</th>
              <th>EMA High 5</th>
              <th>EMA Low 5</th>
              <th>EMA High 100</th>
              <th>EMA Low 100</th>
              <th>EMA Close 100</th>
              <th>Signal</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {(data || []).map((s, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 600 }}>{s.symbol}</td>
                <td>₹{s.price}</td>
                <td>{s.ema_high_5}</td>
                <td>{s.ema_low_5}</td>
                <td>{s.ema_high_100}</td>
                <td>{s.ema_low_100}</td>
                <td className="text-blue">{s.ema_close_100}</td>
                <td>
                  <span className={`badge ${
                    s.signal.includes("BUY") ? "badge-success" : 
                    s.signal.includes("SELL") ? "badge-danger" : "badge-warning"
                  }`}>
                    {s.signal}
                  </span>
                </td>
                <td>
                  <button className="action-btn" onClick={() => openChart(s.symbol)}>
                    Chart
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default Ribbon;