src/components/StockPopup.jsx

import React, { useEffect, useState, useMemo } from 'react';
import { X, TrendingUp, TrendingDown, Star } from 'lucide-react';
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
import { getHistoricalData, fetchRealData } from '../data/historicalData';
import { Loader2 } from 'lucide-react';
import InvestmentCommittee from './InvestmentCommittee';

const TIMEFRAME_DAYS = {
  '1W': 7,
  '1M': 30,
  '3M': 90,
  '1Y': 365,
  'ALL': 365
};

export default function StockPopup({ ticker, assetName, onClose, allHoldings = [], prices = {} }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [isDebating, setIsDebating] = useState(false);
  const [timeframe, setTimeframe] = useState('1M');

  useEffect(() => {
    async function loadData() {
      if (ticker) {
        setLoading(true);
        const realData = await fetchRealData(ticker);
        setData(realData);
        setLoading(false);
        setIsDebating(false);
      }
    }
    loadData();
  }, [ticker]);

  // Calculate Top Performers
  const topPerformers = useMemo(() => {
    if (!allHoldings.length || !prices) return [];
    
    return allHoldings
      .map(asset => ({
        ...asset,
        perf: prices[asset.ticker]?.percent || 0,
        currentPrice: prices[asset.ticker]?.price || 0
      }))
      .sort((a, b) => b.perf - a.perf)
      .slice(0, 5);
  }, [allHoldings, prices]);

  const viewData = useMemo(() => {
    if (!data) return null;
    
    // Slice history based on timeframe
    const daysToShow = TIMEFRAME_DAYS[timeframe] || 30;
    const startIndex = Math.max(0, data.history.length - daysToShow);
    const slicedHistory = data.history.slice(startIndex);
    
    // Recalculate metrics for the specific timeframe
    if (slicedHistory.length === 0) return null;
    
    const currentPrice = slicedHistory[slicedHistory.length - 1].price;
    const oldPrice = slicedHistory[0].price;
    const change = Number((currentPrice - oldPrice).toFixed(2));
    const percentChange = Number(((change / oldPrice) * 100).toFixed(2));
    const isPositive = change >= 0;
    
    return {
      ...data,
      history: slicedHistory,
      change,
      percentChange,
      isPositive
    };
  }, [data, timeframe]);

  if (!ticker) return null;

  if (loading || !viewData) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
        <div className="text-center">
          <Loader2 className="animate-spin text-gs-gold mb-4 mx-auto" size={48} />
          <p className="text-white text-lg font-light">Connecting to Yahoo Finance...</p>
        </div>
      </div>
    );
  }

  const color = viewData.isPositive ? '#00C805' : '#FF5000';
  const bgColor = '#111111'; // Dark theme background

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
      <div 
        className="w-full max-w-5xl max-h-[90vh] overflow-y-auto rounded-xl shadow-2xl flex flex-col animate-in zoom-in-95 duration-200"
        style={{ backgroundColor: bgColor }}
      >
        {/* Header */}
        <div className="p-6 pb-4 flex justify-between items-start sticky top-0 bg-[#111111] z-10 border-b border-gray-800">
          <div>
            <h2 className="text-2xl font-bold text-white flex items-center">
              {assetName} <Star size={18} className="ml-3 text-gray-500 hover:text-yellow-400 cursor-pointer" />
            </h2>
            <div className="flex items-end mt-2 space-x-3">
              <span className="text-4xl font-bold text-white">${viewData.currentPrice}</span>
              <div className={`flex items-center text-lg font-medium pb-1 ${viewData.isPositive ? 'text-[#00C805]' : 'text-[#FF5000]'}`}>
                {viewData.isPositive ? '+' : ''}{viewData.change} ({viewData.isPositive ? '+' : ''}{viewData.percentChange}%)
              </div>
            </div>
            <p className="text-gray-400 text-xs mt-1">At close: {viewData.history[viewData.history.length-1].date}</p>
          </div>
          <button 
            onClick={onClose}
            className="p-2 rounded-full bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors"
          >
            <X size={20} />
          </button>
        </div>

        <div className="p-8 grid grid-cols-1 lg:grid-cols-12 gap-10">
          {/* Main Chart Area */}
          <div className="lg:col-span-8">
            <div className="h-80 w-full mt-4">
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={viewData.history} margin={{ top: 10, right: 0, left: 0, bottom: 0 }}>
                  <defs>
                    <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor={color} stopOpacity={0.3}/>
                      <stop offset="95%" stopColor={color} stopOpacity={0}/>
                    </linearGradient>
                  </defs>
                  <XAxis dataKey="date" hide />
                  <YAxis domain={['dataMin', 'dataMax']} hide />
                  <Tooltip 
                    contentStyle={{ backgroundColor: '#222', border: 'none', borderRadius: '8px', color: '#fff' }}
                    itemStyle={{ color: '#fff', fontWeight: 'bold' }}
                    labelStyle={{ color: '#888' }}
                  />
                  <ReferenceLine y={viewData.history[0].price} stroke="#333" strokeDasharray="3 3" />
                  <Area 
                    type="monotone" 
                    dataKey="price" 
                    stroke={color} 
                    strokeWidth={2} 
                    fillOpacity={1} 
                    fill="url(#colorPrice)" 
                  />
                </AreaChart>
              </ResponsiveContainer>
            </div>

            {/* Time Controls */}
            <div className="flex space-x-6 mt-6 border-b border-gray-800 pb-2">
              {['1W', '1M', '3M', '1Y', 'ALL'].map(t => (
                <button 
                  key={t} 
                  onClick={() => setTimeframe(t)}
                  className={`text-sm font-bold pb-2 border-b-2 transition-colors ${
                    t === timeframe 
                      ? (viewData.isPositive ? 'text-[#00C805] border-[#00C805]' : 'text-[#FF5000] border-[#FF5000]') 
                      : 'text-gray-600 border-transparent hover:text-gray-300'
                  }`}
                >
                  {t}
                </button>
              ))}
            </div>

            <div className="mt-8">
               <InvestmentCommittee 
                ticker={ticker}
                isDebating={isDebating}
                setIsDebating={setIsDebating}
              />
            </div>
          </div>

          {/* Right Sidebar: Top Performers */}
          <div className="lg:col-span-4 space-y-8">
            <div>
              <h3 className="text-white text-xs font-black uppercase tracking-[0.2em] mb-8 flex items-center gap-3">
                <span className="text-lg">🏆</span> Top Performers
              </h3>
              
              <div className="space-y-6">
                {topPerformers.map((asset, idx) => (
                  <div key={asset.ticker} className="flex items-center justify-between group">
                    <div className="flex items-center gap-4">
                      <div className="w-6 flex justify-center">
                        {idx === 0 ? <span className="text-lg">🥇</span> : 
                         idx === 1 ? <span className="text-lg">🥈</span> : 
                         idx === 2 ? <span className="text-lg">🥉</span> : 
                         <div className="p-1.5 bg-gs-navy rounded-md text-gs-gold/50"><TrendingUp size={12} /></div>}
                      </div>
                      
                      <div 
                        className="w-12 h-12 rounded-xl flex items-center justify-center text-[10px] font-black text-gs-navy"
                        style={{ backgroundColor: asset.color }}
                      >
                        {asset.ticker}
                      </div>
                      
                      <div>
                        <p className="text-sm font-bold text-white tracking-tight">{asset.ticker}</p>
                        <p className="text-[10px] text-gray-500 font-medium tracking-wide">${asset.currentPrice.toLocaleString()}</p>
                      </div>
                    </div>
                    
                    <div className="text-right">
                      <span className={`text-sm font-black ${asset.perf >= 0 ? 'text-[#00C805]' : 'text-[#FF5000]'}`}>
                        {asset.perf >= 0 ? '+' : ''}{asset.perf.toFixed(2)}%
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="pt-8 border-t border-gray-800">
               <div className="bg-gs-navy/30 rounded-2xl p-5 border border-white/5">
                 <h4 className="text-[10px] font-bold text-gs-gold uppercase tracking-widest mb-3">Portfolio Insight</h4>
                 <p className="text-xs text-gray-400 leading-relaxed">
                   {assetName} currently ranks #{topPerformers.findIndex(a => a.ticker === ticker) + 1} among your top-tier performers.
                 </p>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}