"use client";

import { useState } from "react";
import {Sparkles } from "lucide-react";
import { rebalancePortfolio, runMonteCarlo } from "@/lib/api-v2";
import { PageContainer, Card, Badge } from "@/components/shared/PageContainer";
import { toast } from "sonner";

/** 再平衡结果。 */
interface RebalanceResult {
  irr_impact?: number;
  dpi_impact?: number;
}

/** Monte Carlo 结果。 */
interface MonteCarloResult {
  percentile_p5?: string;
  percentile_p50?: string;
  percentile_p95?: string;
}

export default function PortfolioPage() {
  const [rebalanceResult, setRebalanceResult] = useState<RebalanceResult | null>(null);
  const [mcResult, setMcResult] = useState<MonteCarloResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleRebalance = async () => {
    setIsLoading(true);
    try {
      const resp = await rebalancePortfolio([]);
      setRebalanceResult(resp.data as RebalanceResult);
    } catch {
      toast.error("分析失败");
    } finally {
      setIsLoading(false);
    }
  };

  const handleMonteCarlo = async () => {
    setIsLoading(true);
    try {
      const resp = await runMonteCarlo([0.15, 0.22, 0.08, 0.35, 0.12]);
      setMcResult(resp.data as MonteCarloResult);
    } catch {
      toast.error("模拟失败");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <PageContainer title="组合管理" description="边际回报率计算 + 组合再平衡 + Monte Carlo 模拟">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <Card>
          <h3 className="font-medium text-gray-900">组合再平衡</h3>
          <p className="mt-1 text-sm text-gray-500">AI 分析各企业边际回报率，建议资源再分配</p>
          <button
            onClick={handleRebalance}
            disabled={isLoading}
            className="mt-3 flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white hover:bg-gray-700 disabled:opacity-50"
          >
            <Sparkles size={16} /> 分析
          </button>
          {rebalanceResult && (
            <div className="mt-3 space-y-2 text-sm">
              {rebalanceResult.irr_impact != null && (
                <p>IRR 影响：<Badge color="green">+{rebalanceResult.irr_impact}%</Badge></p>
              )}
              {rebalanceResult.dpi_impact != null && (
                <p>DPI 影响：<Badge color="green">+{rebalanceResult.dpi_impact}</Badge></p>
              )}
            </div>
          )}
        </Card>

        <Card>
          <h3 className="font-medium text-gray-900">Monte Carlo 模拟</h3>
          <p className="mt-1 text-sm text-gray-500">10000 次随机抽样 → IRR/DPI 概率分布</p>
          <button
            onClick={handleMonteCarlo}
            disabled={isLoading}
            className="mt-3 flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white hover:bg-gray-700 disabled:opacity-50"
          >
            <Sparkles size={16} /> 模拟
          </button>
          {mcResult && (
            <div className="mt-3 space-y-2 text-sm">
              <p>P5: <Badge color="red">{mcResult.percentile_p5}</Badge></p>
              <p>P50: <Badge color="amber">{mcResult.percentile_p50}</Badge></p>
              <p>P95: <Badge color="green">{mcResult.percentile_p95}</Badge></p>
            </div>
          )}
        </Card>
      </div>
    </PageContainer>
  );
}