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

export default function Nifty50Dashboard() {
  const [stocks, setStocks] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData();
    const interval = setInterval(fetchData, 60000); // Refresh every 60s
    return () => clearInterval(interval);
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get("http://localhost:5000/api/nifty50");
      setStocks(response.data);
      setLoading(false);
    } catch (error) {
      console.error("Error fetching stock data", error);
    }
  };

  if (loading) return <div className="p-6">Loading...</div>;

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Nifty 50 Stock Dashboard</h1>
      <table className="w-full text-left border">
        <thead className="bg-gray-100">
          <tr>
            <th className="p-2 border">Symbol</th>
            <th className="p-2 border">Current Price</th>
            <th className="p-2 border">Change (%)</th>
            <th className="p-2 border">Volume</th>
            <th className="p-2 border">Market Cap</th>
          </tr>
        </thead>
        <tbody>
          {stocks.map((stock) => (
            <tr key={stock.symbol} className="hover:bg-gray-50">
              <td className="p-2 border">{stock.symbol}</td>
              <td className="p-2 border">₹{stock.price.toFixed(2)}</td>
              <td className={`p-2 border ${stock.change >= 0 ? "text-green-600" : "text-red-600"}`}>
                {stock.change.toFixed(2)}%
              </td>
              <td className="p-2 border">{stock.volume.toLocaleString()}</td>
              <td className="p-2 border">₹{(stock.marketCap / 1e9).toFixed(2)} B</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}