import { useState, useEffect } from "react";
import { useLoaderData, useNavigate, useLocation } from "react-router";
import TradingViewChart from "../components/TradingViewChart";
import Navbar from "../components/Navbar";
import type { TradingDecision, AnalystReport, DebateRound } from "../types/agents";

export const meta = () => [{ title: "Stock Detail - AITrader" }];

interface LoaderData {
  ticker: string;
  position: { qty: number; avg_entry_price: number; current_price: number; market_value: number; unrealized_pl: number } | null;
  orders: any[];
  bars: any[];
  timeframe: string;
  range: string;
  stockRecord?: any;
}

const TIMEFRAMES = [
  { value: "1Min", label: "1 Minute" },
  { value: "1D", label: "1 Day" },
  { value: "5Min", label: "5 Min" },
  { value: "15Min", label: "15 Min" },
  { value: "1H", label: "1 Hour" },
  { value: "1W", label: "1 Week" },
];

const RANGES = [
  { value: "1D", label: "1 Day" },
  { value: "1W", label: "1 Week" },
  { value: "1M", label: "1 Month" },
  { value: "3M", label: "3 Months" },
  { value: "1Y", label: "1 Year" },
  { value: "3Y", label: "3 Years" },
  { value: "ALL", label: "All" },
];

export async function loader({ params, request }: { params: { ticker: string }; request: Request }) {
  const ticker = params.ticker?.toUpperCase() || "";
  const url = new URL(request.url);
  const timeframe = url.searchParams.get("timeframe") || "1D";
  const range = url.searchParams.get("range") || "1M";
  
  // Build base URL from request for server-side fetches
  const reqUrl = new URL(request.url);
  const host = request.headers.get("host") || reqUrl.host;
  const protocol = reqUrl.protocol;
  const baseUrl = `${protocol}//${host}`;

  let position = null;
  let orders = [];
  let bars = [];
  let stockRecord: any = null;
  let stockRecord: any = null;
  try {
    const stockRes = await fetch(`${baseUrl}/api/stocks`);
    if (stockRes.ok) {
      const list = await stockRes.json();
      stockRecord = list.find((s: any) => s.ticker === ticker) || null;
    }
  } catch (e) {
    // ignore
  }
  
  try {
    // Fetch positions
    const posRes = await fetch(`${baseUrl}/api/alpaca/positions`);
    const positions = posRes.ok ? await posRes.json() : [];
    position = positions.find((p: any) => p.ticker === ticker) ?? null;

    // Fetch orders
    const ordRes = await fetch(`${baseUrl}/api/alpaca/orders`);
    const ordersData = ordRes.ok ? await ordRes.json() : { orders: [] };
    orders = ordersData.orders?.filter((o: any) => o.symbol === ticker) || [];

    // Fetch bars for chart with timeframe and range
    const barsRes = await fetch(`${baseUrl}/api/alpaca/quote/${ticker}?timeframe=${timeframe}&range=${range}`);
    const barsData = barsRes.ok ? await barsRes.json() : null;
    bars = barsData?.bars || [];

    // Fetch stock record (to get lastJobId)
    try {
      const stockRes = await fetch(`${baseUrl}/api/stocks`);
      if (stockRes.ok) {
        const list = await stockRes.json();
        stockRecord = list.find((s: any) => s.ticker === ticker) || null;
      }
    } catch (e) {
      // ignore
    }
  } catch (err) {
    console.error(`analyze/${ticker}: loader error`, err);
  }

  return Response.json({ ticker, position, orders, bars, timeframe, range });
}

export default function StockDetail() {
  const { ticker, position, orders, bars, timeframe, range, stockRecord } = useLoaderData() as LoaderData;
  const navigate = useNavigate();
  const location = useLocation();
  
  const [analysisLoading, setAnalysisLoading] = useState(false);
  const [analystReports, setAnalystReports] = useState<AnalystReport[]>([]);
  const [debateRounds, setDebateRounds] = useState<DebateRound[]>([]);
  const [decision, setDecision] = useState<TradingDecision | null>(null);
  const [showAnalysts, setShowAnalysts] = useState(false);
  const [showDebate, setShowDebate] = useState(false);
  const [jobStatus, setJobStatus] = useState<any>(null);
  const [jobPolling, setJobPolling] = useState(false);

  // Cache key for this ticker
  const cacheKey = `tradinggraph-${ticker}`;

  // Load cached results on mount
  useEffect(() => {
    const cached = sessionStorage.getItem(cacheKey);
    if (cached) {
      try {
        const data = JSON.parse(cached);
        if (data.analystReports) setAnalystReports(data.analystReports);
        if (data.debateRounds) setDebateRounds(data.debateRounds);
        if (data.decision) setDecision(data.decision);
      } catch (e) {
        console.error("Failed to parse cached trading graph data:", e);
      }
    }

    // If stock record contains a job id, start polling job status
    if (stockRecord?.lastJobId) {
      setJobPolling(true);
      let cancelled = false;
      const poll = async () => {
        try {
          const res = await fetch(`/api/jobs/${stockRecord.lastJobId}`);
          if (!res.ok) return;
          const j = await res.json();
          if (cancelled) return;
          setJobStatus(j);
          if (j.state === "completed" || j.state === "failed") {
            setJobPolling(false);
            cancelled = true;
            return;
          }
        } catch (e) {
          console.warn("Failed to poll job status:", e);
        }
        setTimeout(poll, 1000);
      };
      poll();
      return () => { cancelled = true; };
    }
  }, [cacheKey, stockRecord]);

  const updateParams = (newTimeframe: string, newRange: string) => {
    const searchParams = new URLSearchParams(location.search);
    searchParams.set("timeframe", newTimeframe);
    searchParams.set("range", newRange);
    navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
  };

  const runTradingGraph = async () => {
    setAnalysisLoading(true);
    setAnalystReports([]);
    setDebateRounds([]);
    setDecision(null);
    
    try {
      // Ensure ticker is saved in DB before analysis
      try {
        const fd = new FormData();
        fd.append("ticker", ticker);
        await fetch("/api/stocks", { method: "POST", body: fd });
      } catch (e) {
        console.warn("Failed to ensure ticker saved:", e);
      }

      const res = await fetch("/api/analyze", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ticker }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Analysis failed");
      
      const reports = data.agentSignals.map((sig: any) => ({
        analyst: sig.agent,
        signal: sig,
        report: sig.reasoning,
      }));
      const debates = data.debateRounds || [];
      
      setAnalystReports(reports);
      setDebateRounds(debates);
      setDecision(data);

      // Save last decision/explanation to DB
      try {
        const fd2 = new FormData();
        fd2.append("ticker", ticker);
        fd2.append("lastDecision", data.action ?? "");
        fd2.append("lastExplanation", data.reasoning ?? "");
        if (data.executionPlan) fd2.append("lastExecutionPlan", JSON.stringify(data.executionPlan));
        await fetch("/api/stocks", { method: "POST", body: fd2 });
      } catch (e) {
        console.warn("Failed to save decision to DB:", e);
      }
      
      // Cache the results
      sessionStorage.setItem(cacheKey, JSON.stringify({
        analystReports: reports,
        debateRounds: debates,
        decision: data,
        timestamp: Date.now(),
      }));
    } catch (err) {
      console.error("Analysis error:", err);
    } finally {
      setAnalysisLoading(false);
    }
  };

  // Convert Alpaca bars to TradingView format
  // Keep full timestamp for intraday, use date-only for daily
  // Sort bars by timestamp to ensure ascending order
  const sortedBars = [...(bars || [])].sort((a, b) => {
    const timeA = a.t ? new Date(a.t).getTime() : 0;
    const timeB = b.t ? new Date(b.t).getTime() : 0;
    return timeA - timeB;
  });
  
  const chartData = sortedBars?.map((bar: any) => {
    // Handle timestamp - could be string, number, or Date
    let time: string | number = "";
    if (bar.t) {
      const date = new Date(bar.t);
      if (!isNaN(date.getTime())) {
        // Use Unix timestamp for intraday, date string for daily
        time = ["1Min", "5Min", "15Min", "30Min", "1H"].includes(timeframe) 
          ? Math.floor(date.getTime() / 1000) 
          : date.toISOString().split('T')[0];
      }
    }
    return {
      time,
      open: bar.o,
      high: bar.h,
      low: bar.l,
      close: bar.c,
    };
  })
  // Remove duplicates by time (keep first occurrence) and filter valid bars
  .filter((bar: any, index: number, arr: any[]) => 
    bar.time && bar.open != null && bar.high != null && bar.low != null && bar.close != null &&
    index === arr.findIndex((b: any) => b.time === bar.time)
  ) || [];

  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">{ticker} Detail</h1>
        
        <div className="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
          <div className="flex items-center gap-4 mb-4">
            <span className="text-gray-700 font-medium">Timeframe:</span>
            <select
              value={timeframe}
              onChange={(e) => updateParams(e.target.value, range)}
              className="border border-gray-300 rounded-lg px-3 py-1.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
            >
              {TIMEFRAMES.map((tf) => (
                <option key={tf.value} value={tf.value}>{tf.label}</option>
              ))}
            </select>
            
            <span className="text-gray-700 font-medium">Range:</span>
            <select
              value={range}
              onChange={(e) => updateParams(timeframe, e.target.value)}
              className="border border-gray-300 rounded-lg px-3 py-1.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
            >
              {RANGES.map((r) => (
                <option key={r.value} value={r.value}>{r.label}</option>
              ))}
            </select>
          </div>
          
          <TradingViewChart ticker={ticker} data={chartData} timeframe={timeframe} />
          
          <button
            onClick={runTradingGraph}
            disabled={analysisLoading}
            className="mt-4 bg-purple-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors"
          >
            {analysisLoading ? "Running Trading Graph..." : "Run Trading Graph Analysis"}
          </button>

          {/* Job status link */}
          {stockRecord?.lastJobId && (
            <div className="mt-3 text-sm text-gray-600">
              Background job: <a href={`/api/jobs/${stockRecord.lastJobId}`} className="text-blue-600 hover:underline">{stockRecord.lastJobId}</a>
              {jobStatus && (
                <span className="ml-3">Status: <strong>{jobStatus.state}</strong></span>
              )}
            </div>
          )}
        </div>
        
        <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Position</h2>
          {position ? (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <tbody>
                  <tr className="border-b border-gray-100">
                    <td className="py-2 px-3 font-medium text-gray-700">Quantity</td>
                    <td className="py-2 px-3 text-gray-900">{position.qty} shares</td>
                  </tr>
                  <tr className="border-b border-gray-100">
                    <td className="py-2 px-3 font-medium text-gray-700">Ticker</td>
                    <td className="py-2 px-3 text-gray-900">{ticker}</td>
                  </tr>
                  <tr className="border-b border-gray-100">
                    <td className="py-2 px-3 font-medium text-gray-700">Current Value</td>
                    <td className="py-2 px-3 text-gray-900">${position.market_value.toFixed(2)}</td>
                  </tr>
                  <tr>
                    <td className="py-2 px-3 font-medium text-gray-700">Earnings</td>
                    <td className={`py-2 px-3 font-bold ${position.unrealized_pl >= 0 ? "text-green-600" : "text-red-600"}`}>
                      ${position.unrealized_pl.toFixed(2)}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-gray-600">No position held</p>
          )}
        </div>
        
        {(analystReports.length > 0 || debateRounds.length > 0 || decision) && (
          <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-bold text-gray-900">Trading Graph Workflow</h2>
              {sessionStorage.getItem(cacheKey) && (
                <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                  Cached results
                </span>
              )}
            </div>
            
            {/* Analysts Step - Collapsible */}
            {analystReports.length > 0 && (
              <div className="mb-4">
                <button
                  onClick={() => setShowAnalysts(!showAnalysts)}
                  className="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
                >
                  <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
                    <span className="bg-blue-100 text-blue-800 w-6 h-6 rounded-full flex items-center justify-center text-sm">1</span>
                    Analyst Reports
                  </h3>
                  <span className="text-gray-500">{showAnalysts ? "▼" : "▶"}</span>
                </button>
                {showAnalysts && (
                  <div className="mt-3 space-y-3 pl-4">
                    {analystReports.map((report, i) => (
                      <div key={i} className="bg-gray-50 rounded-lg p-3 border border-gray-200">
                        <div className="flex justify-between items-center mb-2">
                          <span className="font-medium text-gray-900 capitalize">{report.analyst}</span>
                          <span className={`text-sm font-medium ${
                            report.signal?.signal === "bullish" ? "text-green-600" :
                            report.signal?.signal === "bearish" ? "text-red-600" : "text-gray-600"
                          }`}>
                            {report.signal?.signal} ({(report.signal?.confidence * 100).toFixed(0)}%)
                          </span>
                        </div>
                        <p className="text-sm text-gray-600">{report.signal?.reasoning}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
            
            {/* Debate Step - Collapsible */}
            {debateRounds.length > 0 && (
              <div className="mb-4">
                <button
                  onClick={() => setShowDebate(!showDebate)}
                  className="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors"
                >
                  <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
                    <span className="bg-purple-100 text-purple-800 w-6 h-6 rounded-full flex items-center justify-center text-sm">2</span>
                    Research Debate
                  </h3>
                  <span className="text-gray-500">{showDebate ? "▼" : "▶"}</span>
                </button>
                {showDebate && (
                  <div className="mt-3 space-y-3 pl-4">
                    {debateRounds.map((round, i) => (
                      <div key={i} className="border border-gray-200 rounded-lg p-3">
                        <div className="mb-2">
                          <span className="text-green-600 font-medium text-sm">Bullish View:</span>
                          <p className="text-sm text-gray-700 mt-1">{round.bullishView}</p>
                        </div>
                        <div>
                          <span className="text-red-600 font-medium text-sm">Bearish View:</span>
                          <p className="text-sm text-gray-700 mt-1">{round.bearishView}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
            
            {/* Decision Step - Always Visible */}
            {decision && (
              <div>
                <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                  <span className="bg-green-100 text-green-800 w-6 h-6 rounded-full flex items-center justify-center text-sm">3</span>
                  Final Decision
                </h3>
                <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
                  <div className="flex items-center gap-4 mb-3">
                    <span className="text-gray-600">Action:</span>
                    <span className={`font-bold text-lg ${
                      decision.action === "buy" ? "text-green-600" :
                      decision.action === "sell" ? "text-red-600" : "text-gray-600"
                    }`}>
                      {decision.action.toUpperCase()}
                    </span>
                    <span className="text-gray-600">Confidence:</span>
                    <span className="font-medium">{(decision.confidence * 100).toFixed(0)}%</span>
                  </div>
                  {decision.reasoning && (
                    <div>
                      <p className="text-gray-800">{decision.reasoning}</p>
                      {decision.executionPlan && (
                        <div className="mt-3 border-t pt-3">
                          <h4 className="text-sm font-medium text-gray-800 mb-2">Execution Plan</h4>
                          <div className="text-sm text-gray-700 space-y-1">
                            <div>Amount: <span className="font-medium">{decision.executionPlan.amount} shares</span></div>
                            {decision.executionPlan.takeProfit != null && (
                              <div>Take profit: <span className="font-medium">${decision.executionPlan.takeProfit}</span></div>
                            )}
                            {decision.executionPlan.riskManagement?.maxLossPercent != null && (
                              <div>Risk management: <span className="font-medium">{decision.executionPlan.riskManagement.maxLossPercent}% max loss</span></div>
                            )}
                            {decision.executionPlan.riskManagement?.method && (
                              <div>Method: <span className="font-medium">{decision.executionPlan.riskManagement.method}</span></div>
                            )}
                            {decision.executionPlan.note && (
                              <div>Note: <span className="font-medium">{decision.executionPlan.note}</span></div>
                            )}
                          </div>

                          {/* Order suggestion summary */}
                          <div className="mt-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
                            <h5 className="text-sm font-medium text-gray-800">Order Suggestion</h5>
                            <div className="text-sm text-gray-700 mt-2">
                              <div>
                                <span className="font-medium">{decision.action.toUpperCase()}</span> 
                                {decision.executionPlan.amount} shares
                                {decision.executionPlan.takeProfit != null && (
                                  <span> — Take profit: ${decision.executionPlan.takeProfit}</span>
                                )}
                              </div>
                              {decision.executionPlan.riskManagement?.maxLossPercent != null && (
                                <div className="text-xs text-gray-500">Risk: {decision.executionPlan.riskManagement.maxLossPercent}% max loss</div>
                              )}
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
        
        <div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Recent Orders</h2>
          {orders.length === 0 ? (
            <p className="text-gray-500">No orders found for {ticker}</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-200">
                    <th className="text-left py-2 px-3 font-medium text-gray-700">Side</th>
                    <th className="text-left py-2 px-3 font-medium text-gray-700">Qty</th>
                    <th className="text-left py-2 px-3 font-medium text-gray-700">Status</th>
                    <th className="text-left py-2 px-3 font-medium text-gray-700">Filled Price</th>
                    <th className="text-left py-2 px-3 font-medium text-gray-700">Filled At</th>
                  </tr>
                </thead>
                <tbody>
                  {orders.map((order: any, i: number) => (
                    <tr key={order.id || i} className="border-b border-gray-100">
                      <td className="py-2 px-3">
                        <span className={order.side === "buy" ? "text-green-600" : "text-red-600"}>
                          {order.side?.toUpperCase()}
                        </span>
                      </td>
                      <td className="py-2 px-3 text-gray-900">{order.qty}</td>
                      <td className="py-2 px-3 text-gray-900">{order.status}</td>
                      <td className="py-2 px-3 text-gray-900">
                        {order.filled_avg_price ? `$${parseFloat(order.filled_avg_price).toFixed(2)}` : "-"}
                      </td>
                      <td className="py-2 px-3 text-gray-600">
                        {order.filled_at ? new Date(order.filled_at).toLocaleDateString() : "-"}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}