import React, { useEffect, useRef, useState } from "react";
import Chart from "chart.js/auto";

// NOTE: Insert your real API key below (Alpha Vantage or Finnhub recommended)
const API_KEY = "SE3RGXNO85QQTUKC";

export default function InvestProPremium() {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  const [darkMode, setDarkMode] = useState(true);
  const [user, setUser] = useState(null);
  const [portfolio, setPortfolio] = useState([]);
  const [ftsePrice, setFtsePrice] = useState(null);
  const [selectedStock, setSelectedStock] = useState(null);

  const stocks = [
    "HSBA.L",
    "BP.L",
    "AZN.L",
    "ULVR.L",
    "SHEL.L"
  ];

  // ---------- LOGIN SYSTEM ----------
  const handleLogin = (e) => {
    e.preventDefault();
    const username = e.target.username.value;
    setUser(username);
    localStorage.setItem("investpro_user", username);
  };

  useEffect(() => {
    const savedUser = localStorage.getItem("investpro_user");
    const savedPortfolio = JSON.parse(localStorage.getItem("investpro_portfolio")) || [];
    if (savedUser) setUser(savedUser);
    setPortfolio(savedPortfolio);
  }, []);

  const addToPortfolio = (stock) => {
    const updated = [...portfolio, stock];
    setPortfolio(updated);
    localStorage.setItem("investpro_portfolio", JSON.stringify(updated));
  };

  // ---------- FTSE 100 LIVE DATA ----------
  useEffect(() => {
    async function fetchFTSE() {
      try {
        const res = await fetch(
          `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=^FTSE&apikey=${API_KEY}`
        );
        const data = await res.json();
        if (data["Global Quote"]) {
          setFtsePrice(data["Global Quote"]["05. price"]);
        }
      } catch (err) {
        console.error("FTSE fetch error", err);
      }
    }

    fetchFTSE();
    const interval = setInterval(fetchFTSE, 60000);
    return () => clearInterval(interval);
  }, []);

  // ---------- LIVE STOCK CHART ----------
  useEffect(() => {
    if (!chartRef.current) return;

    chartInstance.current = new Chart(chartRef.current, {
      type: "line",
      data: {
        labels: [],
        datasets: [
          {
            label: "Live Price",
            data: [],
            borderWidth: 2,
            tension: 0.4
          }
        ]
      },
      options: {
        responsive: true,
        animation: { duration: 500 }
      }
    });

    const interval = setInterval(() => {
      const time = new Date().toLocaleTimeString();
      const price = Math.random() * 100 + 7000;
      const chart = chartInstance.current;
      if (!chart) return;

      chart.data.labels.push(time);
      chart.data.datasets[0].data.push(price);

      if (chart.data.labels.length > 15) {
        chart.data.labels.shift();
        chart.data.datasets[0].data.shift();
      }

      chart.update();
    }, 3000);

    return () => {
      clearInterval(interval);
      chartInstance.current?.destroy();
    };
  }, []);

  // ---------- PREMIUM UI STYLES ----------
  const themeStyles = {
    background: darkMode
      ? "linear-gradient(135deg,#0f2027,#203a43,#2c5364)"
      : "linear-gradient(135deg,#eef2f3,#8e9eab)",
    color: darkMode ? "white" : "#111"
  };

  if (!user) {
    return (
      <div style={{ ...themeStyles, minHeight: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}>
        <form onSubmit={handleLogin} style={{ background: "rgba(255,255,255,0.1)", padding: 40, borderRadius: 20, backdropFilter: "blur(10px)" }}>
          <h2>InvestPro Login</h2>
          <input name="username" placeholder="Enter Username" required style={{ padding: 10, marginTop: 15, width: "100%" }} />
          <button style={{ marginTop: 20, padding: 10, width: "100%" }}>Login</button>
        </form>
      </div>
    );
  }

  return (
    <div style={{ ...themeStyles, minHeight: "100vh", padding: 30, transition: "0.5s" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <h1 style={{ fontWeight: 300 }}>InvestPro Terminal</h1>
        <button onClick={() => setDarkMode(!darkMode)}>Toggle Theme</button>
      </div>

      <div style={{ marginTop: 20, padding: 20, borderRadius: 20, background: "rgba(255,255,255,0.1)", backdropFilter: "blur(15px)", animation: "fadeIn 1s" }}>
        <h2>FTSE 100 Live</h2>
        <h3>{ftsePrice ? `£${ftsePrice}` : "Loading..."}</h3>
      </div>

      <div style={{ marginTop: 30, padding: 20, borderRadius: 20, background: "rgba(255,255,255,0.1)", backdropFilter: "blur(15px)" }}>
        <h2>Live Market Chart</h2>
        <canvas ref={chartRef} />
      </div>

      <div style={{ marginTop: 30 }}>
        <h2>Top UK Stocks</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 20 }}>
          {stocks.map((stock) => (
            <div key={stock} style={{ padding: 20, borderRadius: 20, background: "rgba(255,255,255,0.1)", backdropFilter: "blur(15px)", transition: "0.3s" }}>
              <h3>{stock}</h3>
              <button onClick={() => setSelectedStock(stock)}>Details</button>
              <button style={{ marginLeft: 10 }} onClick={() => addToPortfolio(stock)}>Add</button>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 40 }}>
        <h2>Your Portfolio</h2>
        {portfolio.length === 0 ? (
          <p>No holdings yet.</p>
        ) : (
          portfolio.map((p, i) => <div key={i}>{p}</div>)
        )}
      </div>

      {selectedStock && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", display: "flex", justifyContent: "center", alignItems: "center" }} onClick={() => setSelectedStock(null)}>
          <div style={{ background: "#111", padding: 30, borderRadius: 20 }} onClick={(e) => e.stopPropagation()}>
            <h2>{selectedStock}</h2>
            <p>Buy from UK Brokers:</p>
            <a href="https://www.halifax.co.uk/investing" target="_blank">Halifax</a><br />
            <a href="https://www.hargreaveslansdown.co.uk" target="_blank">Hargreaves Lansdown</a><br />
            <a href="https://www.trading212.com" target="_blank">Trading 212</a>
          </div>
        </div>
      )}
    </div>
  );
}