AITrader/app/routes/analyze.tsx

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

type AnalysisStep = "input" | "analysts" | "researchers" | "trader" | "decision";

interface AnalysisState {
  ticker: string;
  date: string;
  analysts: AnalystReport[];
  debates: DebateRound[];
  decision: TradingDecision | null;
  isLoading: boolean;
  error: string | null;
}

const SignalBadge = ({ signal }: { signal: AgentSignal["signal"] }) => {
  const colors = {
    bullish: "bg-green-100 text-green-800",
    bearish: "bg-red-100 text-red-800",
    neutral: "bg-gray-100 text-gray-800",
  };
  return (
    <span className={`px-2 py-1 rounded text-xs font-medium ${colors[signal]}`}>
      {signal}
    </span>
  );
};

export const meta = () => {
  return [
    { title: "Analyze - AITrader" },
    { name: "description", content: "Multi-agent trading analysis with dataflow visualization" },
  ];
};

export default function Analyze() {
  const [state, setState] = useState<AnalysisState>({
    ticker: "",
    date: new Date().toISOString().split("T")[0],
    analysts: [],
    debates: [],
    decision: null,
    isLoading: false,
    error: null,
  });

  const [currentStep, setCurrentStep] = useState<AnalysisStep>("input");

  const runAnalysis = async (e: React.FormEvent) => {
    e.preventDefault();
    setState((s) => ({ ...s, isLoading: true, error: null }));

    try {
      const response = await fetch("/api/analyze", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ticker: state.ticker, date: state.date }),
      });

      if (!response.ok) throw new Error("Analysis failed");
      const decision = await response.json();

      setState((s) => ({
        ...s,
        decision,
        isLoading: false,
      }));
      setCurrentStep("decision");
    } catch (err) {
      setState((s) => ({
        ...s,
        error: err instanceof Error ? err.message : "Unknown error",
        isLoading: false,
      }));
    }
  };

  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">Multi-Agent Trading Analysis</h1>

        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Input Parameters</h2>
          <form onSubmit={runAnalysis} className="flex gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Ticker</label>
              <input
                type="text"
                value={state.ticker}
                onChange={(e) => setState((s) => ({ ...s, ticker: e.target.value.toUpperCase() }))}
                placeholder="AAPL"
                className="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 text-gray-900"
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Date</label>
              <input
                type="date"
                value={state.date}
                onChange={(e) => setState((s) => ({ ...s, date: e.target.value }))}
                className="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 text-gray-900"
              />
            </div>
            <div className="flex items-end">
              <button
                type="submit"
                disabled={state.isLoading}
                className="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50"
              >
                {state.isLoading ? "Running..." : "Run Analysis"}
              </button>
            </div>
          </form>
        </div>

        {state.error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            {state.error}
          </div>
        )}

        {currentStep !== "input" && (
          <div className="space-y-6">
            <div className="flex items-center gap-2 mb-4">
              {["input", "analysts", "researchers", "trader", "decision"].map((step, i) => (
                <div key={step} className="flex items-center">
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                      step === currentStep ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
                    }`}
                  >
                    {i + 1}
                  </div>
                  {i < 4 && <div className="w-8 h-0.5 bg-gray-300 mx-1"></div>}
                </div>
              ))}
            </div>

            {state.analysts.length > 0 && (
              <div className="bg-white rounded-xl shadow-lg p-6">
                <h3 className="text-lg font-bold text-gray-900 mb-4">Analyst Reports</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {state.analysts.map((report, i) => (
                    <div key={i} className="border border-gray-200 rounded-lg p-4">
                      <div className="flex justify-between items-center mb-2">
                        <span className="font-medium capitalize">{report.analyst}</span>
                        <SignalBadge signal={report.signal.signal} />
                      </div>
                      <p className="text-sm text-gray-600">{report.report}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {state.debates.length > 0 && (
              <div className="bg-white rounded-xl shadow-lg p-6">
                <h3 className="text-lg font-bold text-gray-900 mb-4">Research Debate</h3>
                {state.debates.map((debate, i) => (
                  <div key={i} className="space-y-3">
                    <div className="bg-green-50 rounded-lg p-3">
                      <span className="text-xs font-semibold text-green-800">Bullish View:</span>
                      <p className="text-sm mt-1">{debate.bullishView}</p>
                    </div>
                    <div className="bg-red-50 rounded-lg p-3">
                      <span className="text-xs font-semibold text-red-800">Bearish View:</span>
                      <p className="text-sm mt-1">{debate.bearishView}</p>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {state.decision && (
              <div className="bg-white rounded-xl shadow-lg p-6">
                <h3 className="text-lg font-bold text-gray-900 mb-4">Trading Decision</h3>
                <div className="flex items-center gap-4 mb-4">
                  <span className="text-2xl font-bold capitalize">{state.decision.action}</span>
                  <span className="text-gray-600">Confidence: {(state.decision.confidence * 100).toFixed(0)}%</span>
                </div>
                <p className="text-gray-700">{state.decision.reasoning}</p>
                
                <div className="mt-4">
                  <span className="text-sm font-medium text-gray-600">Agent Signals:</span>
                  <div className="flex flex-wrap gap-2 mt-2">
                    {state.decision.agentSignals.map((s, i) => (
                      <div key={i} className="flex items-center gap-1">
                        <span className="text-xs capitalize">{s.agent}:</span>
                        <SignalBadge signal={s.signal} />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}