import React, { useState } from "react";
import Chart from "./components/Chart";
import Scanner from "./components/Scanner";
import Ribbon from "./components/Ribbon";
import SmartMoney from "./components/SmartMoney";
import Popup from "./components/Popup";
import AboutScanner from "./components/AboutScanner";
import MarketIntel from "./components/MarketIntel";
import TrendScanner from "./components/TrendScanner";
import "./index.css";

function App() {
  const [selectedStock, setSelectedStock] = useState("NSE:RELIANCE");
  const [signal, setSignal] = useState(null);
  const [view, setView] = useState("scanner");

  return (
    <div className="app-container">
      <h1>📈 Stock Scanner Pro</h1>

      <div className="nav-container">
        <button
          className={`nav-btn ${view === "scanner" ? "active" : ""}`}
          onClick={() => setView("scanner")}
        >
          📊 Scanner
        </button>

        <button
          className={`nav-btn ${view === "ribbon" ? "active" : ""}`}
          onClick={() => setView("ribbon")}
        >
          📈 Ribbon Strategy
        </button>

        <button
          className={`nav-btn ${view === "smartmoney" ? "active" : ""}`}
          onClick={() => setView("smartmoney")}
        >
          🏦 Smart Money
        </button>

        <button
          className={`nav-btn ${view === "trend" ? "active" : ""}`}
          onClick={() => setView("trend")}
        >
          ⚡ Trend Analysis
        </button>

        <button
          className={`nav-btn ${view === "marketintel" ? "active" : ""}`}
          onClick={() => setView("marketintel")}
        >
          📰 Market Intel
        </button>
      </div>

      <div className="animate-fade-in">
        {view === "scanner" && (
          <>
            <AboutScanner />
            <Scanner onSelectStock={setSelectedStock} onSignal={setSignal} />
            <div className="glass-card" style={{ marginTop: "20px" }}>
              <h2>TradingView Chart</h2>
              <Chart symbol={selectedStock} />
            </div>
            {signal && <Popup signal={signal} />}
          </>
        )}

        {view === "ribbon" && <Ribbon />}
        
        {view === "smartmoney" && <SmartMoney />}
        
        {view === "marketintel" && <MarketIntel />}
        
        {view === "trend" && <TrendScanner />}
      </div>
    </div>
  );
}

export default App;