AITrader/app/routes/analyze.tsx

import { useState, useEffect } from "react";
import Navbar from "../components/Navbar";
import type { TradingDecision } from "../types/agents";

interface StockRow {
  id: string;
  ticker: string;
  currentPrice: number | null;
  position: number;
  rsi: number | null;
  analysis: TradingDecision | null;
  loading: boolean;
}

export const meta = () => {
  return [
    { title: "Portfolio Analysis - AITrader" },
    { name: "description", content: "Analyze your stock portfolio with AI trading insights" },
  ];
};

export default function Analyze() {
  const [stocks, setStocks] = useState<StockRow[]>([]);
  const [newTicker, setNewTicker] = useState("");

// Load Alpaca portfolio and database stocks on mount
   useEffect(() => {
     const loadPortfolio = async () => {
       try {
         // Fetch both Alpaca positions and database stocks
         const [positionsRes, dbStocksRes] = await Promise.all([
           fetch("/api/alpaca/positions"),
           fetch("/api/stocks"),
         ]);

         const positions = positionsRes.ok ? await positionsRes.json() : [];
         const dbStocks = dbStocksRes.ok ? await dbStocksRes.json() : [];

         // Create a set of tickers from Alpaca positions for quick lookup
         const alpacaTickers = new Set(positions.map((p: { ticker: string }) => p.ticker));

         // Build stocks array for Alpaca positions
         const alpacaStocks = await Promise.all(
           positions.map(async (p: { ticker: string; qty: number }) => {
             try {
               const quoteRes = await fetch(`/api/alpaca/quote/${p.ticker}`);
               const quote = quoteRes.ok ? await quoteRes.json() : null;
               return {
                 id: `alpaca-${p.ticker}`,
                 ticker: p.ticker,
                 currentPrice: quote?.price ?? null,
                 position: p.qty,
                 rsi: null,
                 analysis: null,
                 loading: false,
               };
             } catch {
               return {
                 id: `alpaca-${p.ticker}`,
                 ticker: p.ticker,
                 currentPrice: null,
                 position: p.qty,
                 rsi: null,
                 analysis: null,
                 loading: false,
               };
             }
           })
         );

         // Add database stocks that are not in Alpaca positions with position=0
         const dbOnlyStocks = [];
         for (const stock of dbStocks) {
           if (!alpacaTickers.has(stock.ticker)) {
             try {
               const quoteRes = await fetch(`/api/alpaca/quote/${stock.ticker}`);
               const quote = quoteRes.ok ? await quoteRes.json() : null;
               dbOnlyStocks.push({
                 id: `db-${stock.ticker}`,
                 ticker: stock.ticker,
                 currentPrice: quote?.price ?? null,
                 position: 0,
                 rsi: null,
                 analysis: null,
                 loading: false,
               });
             } catch {
               dbOnlyStocks.push({
                 id: `db-${stock.ticker}`,
                 ticker: stock.ticker,
                 currentPrice: null,
                 position: 0,
                 rsi: null,
                 analysis: null,
                 loading: false,
               });
             }
           }
         }

         setStocks([...alpacaStocks, ...dbOnlyStocks]);
       } catch (err) {
         console.error("[analyze] Portfolio load error:", err);
       }
     };

     loadPortfolio();
   }, []);

  // Refresh prices every minute
  useEffect(() => {
    const interval = setInterval(() => {
      stocks.forEach((stock) => {
        fetch(`/api/alpaca/quote/${stock.ticker}`)
          .then((res) => res.ok ? res.json() : null)
          .then((data) => {
            if (data?.price) {
              setStocks((s) => s.map((st) => 
                st.ticker === stock.ticker ? { ...st, currentPrice: data.price } : st
              ));
            }
          })
          .catch(() => {});
      });
    }, 60000);
    
    return () => clearInterval(interval);
  }, [stocks]);

  const addStock = async () => {
    if (!newTicker.trim()) return;
    const ticker = newTicker.trim().toUpperCase();

    console.log("[analyze] Adding stock:", ticker);

    // Check if ticker already exists
    if (stocks.some((s) => s.ticker === ticker)) {
      console.log("[analyze] Ticker already exists:", ticker);
      return;
    }

    // Save to database first
    try {
      const formData = new FormData();
      formData.append("ticker", ticker);
      await fetch("/api/stocks", {
        method: "POST",
        body: formData,
      });
    } catch (err) {
      console.error("[analyze] Error saving stock to DB:", err);
    }

    const newStock: StockRow = {
      id: `db-${ticker}`,
      ticker,
      currentPrice: null,
      position: 0,
      rsi: null,
      analysis: null,
      loading: true,
    };

    setStocks((s) => [...s, newStock]);
    setNewTicker("");

    try {
      console.log("[analyze] Fetching quote and positions for", ticker);
      const [quoteRes, positionsRes] = await Promise.all([
        fetch(`/api/alpaca/quote/${ticker}`),
        fetch("/api/alpaca/positions"),
      ]);

      console.log("[analyze] Quote response:", quoteRes.status);
      console.log("[analyze] Positions response:", positionsRes.status);

      const quote = quoteRes.ok ? await quoteRes.json() : null;
      const positions = positionsRes.ok ? await positionsRes.json() : [];

      console.log("[analyze] Quote data:", quote);
      console.log("[analyze] Positions data:", positions);

      const position = positions.find((p: { ticker: string; qty: number }) =>
        p.ticker === ticker
      )?.qty ?? 0;

      console.log("[analyze] Found position:", position);

      setStocks((s) => s.map((st) =>
        st.ticker === ticker
          ? { ...st, loading: false, currentPrice: quote?.price ?? null, position }
          : st
      ));
    } catch (err) {
      console.error("[analyze] Error adding stock:", err);
      setStocks((s) => s.map((st) => st.ticker === ticker ? { ...st, loading: false } : st));
    }
  };

  // Update all positions on mount and when stocks change
  useEffect(() => {
    if (stocks.length === 0) return;
    
    const updatePositions = async () => {
      try {
        const res = await fetch("/api/alpaca/positions");
        if (res.ok) {
          const positions = await res.json();
          setStocks((s) => s.map((st) => {
            const pos = positions.find((p: { ticker: string; qty: number }) => 
              p.ticker === st.ticker
            );
            return pos ? { ...st, position: pos.qty } : st;
          }));
        }
      } catch (err) {
        console.error("[analyze] Position update error:", err);
      }
    };
    
    updatePositions();
  }, [stocks.length]);

  const removeStock = (id: string) => {
    setStocks((s) => s.filter((stock) => stock.id !== id));
  };

  const runAnalysis = async (id: string, ticker: string) => {
    setStocks((s) => s.map((st) => st.id === id ? { ...st, loading: true } : st));
    
    try {
      const [quoteRes, indicatorsRes] = await Promise.all([
        fetch(`/api/alpaca/quote/${ticker}`),
        fetch(`/api/indicators?symbol=${ticker}`),
      ]);
      
      const quote = quoteRes.ok ? await quoteRes.json() : null;
      const indicators = indicatorsRes.ok ? await indicatorsRes.json() : null;
      
      const analysisRes = await fetch("/api/analyze", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ticker }),
      });
      const analysis = analysisRes.ok ? await analysisRes.json() : null;
      
      setStocks((s) => s.map((st) => 
        st.id === id 
          ? { 
              ...st, 
              loading: false,
              currentPrice: quote?.price ?? null,
              rsi: indicators?.indicators?.rsi ?? null,
              analysis,
            } 
          : st
      ));
    } catch {
      setStocks((s) => s.map((st) => st.id === id ? { ...st, loading: false } : st));
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
      <Navbar />
      <div className="mx-auto max-w-7xl px-6 py-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">Portfolio Analysis</h1>
        
        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
          <div className="flex gap-3 mb-4">
            <input
              type="text"
              value={newTicker}
              onChange={(e) => setNewTicker(e.target.value.toUpperCase())}
              placeholder="Add ticker (e.g. AAPL)"
              className="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
              onKeyDown={(e) => e.key === "Enter" && addStock()}
            />
            <button
              onClick={addStock}
              disabled={!newTicker.trim()}
              className="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              Add Stock
            </button>
          </div>
          
          {stocks.length === 0 ? (
            <p className="text-gray-500 text-center py-8">No stocks added. Add a ticker to get started.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-200">
                    <th className="text-left py-3 px-4 font-medium text-gray-700">Ticker</th>
                    <th className="text-left py-3 px-4 font-medium text-gray-700">Price</th>
                    <th className="text-left py-3 px-4 font-medium text-gray-700">Position</th>
                    <th className="text-left py-3 px-4 font-medium text-gray-700">RSI</th>
                    <th className="text-left py-3 px-4 font-medium text-gray-700">Analysis</th>
                    <th className="text-left py-3 px-4 font-medium text-gray-700">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {stocks.map((stock) => (
                    <tr key={stock.id} className="border-b border-gray-100">
                      <td className="py-3 px-4 font-bold text-gray-900">{stock.ticker}</td>
                      <td className="py-3 px-4 text-gray-900">
                        {stock.currentPrice ? `$${stock.currentPrice.toFixed(2)}` : "-"}
                      </td>
<td className="py-3 px-4 text-gray-900 font-medium">
                        {stock.position}
                      </td>
                      <td className="py-3 px-4">
                        {stock.rsi ? (
                          <span className={
                            stock.rsi > 70 ? "text-red-600" :
                            stock.rsi < 30 ? "text-green-600" : "text-gray-900"
                          }>
                            {stock.rsi.toFixed(2)}
                          </span>
                        ) : "-"}
                      </td>
                      <td className="py-3 px-4">
                        {stock.analysis ? (
                          <div>
                            <span className={`font-medium ${
                              stock.analysis.action === "buy" ? "text-green-600" :
                              stock.analysis.action === "sell" ? "text-red-600" : "text-gray-600"
                            }`}>
                              {stock.analysis.action.toUpperCase()}
                            </span>
                            <div className="text-xs text-gray-500">
                              Confidence: {(stock.analysis.confidence * 100).toFixed(0)}%
                            </div>
                          </div>
                        ) : stock.loading ? (
                          <span className="text-blue-600">Analyzing...</span>
                        ) : "-"}
                      </td>
                      <td className="py-3 px-4">
                        <div className="flex gap-2">
                          <button
                            onClick={() => runAnalysis(stock.id, stock.ticker)}
                            disabled={stock.loading}
                            className="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 disabled:opacity-50"
                          >
                            {stock.loading ? "Running..." : "Analyze"}
                          </button>
                          <button
                            onClick={() => removeStock(stock.id)}
                            className="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
                          >
                            Delete
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}