"use client";

import { useEffect, useState, useCallback } from "react";
import { fetchAPI, postAPI } from "@/lib/api";
import type { LatestResult, SectorData, IndexOverview, DailyReviewResponse } from "@/lib/api";
import MarketTemp from "@/components/market-temp";
import StockCard from "@/components/stock-card";
import SectorHeatmap from "@/components/sector-heatmap";
import { useWebSocket } from "@/hooks/use-websocket";
import { useAuth } from "@/hooks/use-auth";
import { ThemeToggle } from "@/components/theme-toggle";
import { markdownToHtml } from "@/lib/markdown";

interface ScanStatus {
  is_trading: boolean;
  scan_mode: string;
  description: string;
}

export default function DashboardPage() {
  const { user } = useAuth();
  const [data, setData] = useState<LatestResult | null>(null);
  const [sectors, setSectors] = useState<SectorData[]>([]);
  const [scanStatus, setScanStatus] = useState<ScanStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [refreshResult, setRefreshResult] = useState<string | null>(null);
  const [llmEnabled, setLlmEnabled] = useState(false);
  const [indices, setIndices] = useState<IndexOverview[]>([]);
  const [dailyReview, setDailyReview] = useState<string | null>(null);
  const [generatingReview, setGeneratingReview] = useState(false);

  const loadData = useCallback(async () => {
    try {
      const [latest, sectorData, status, health, overview, reviewData] = await Promise.all([
        fetchAPI<LatestResult>("/api/recommendations/latest"),
        fetchAPI<SectorData[]>("/api/sectors/hot?limit=8"),
        fetchAPI<ScanStatus>("/api/recommendations/status"),
        fetchAPI<{ llm_enabled: boolean }>("/api/health"),
        fetchAPI<IndexOverview[]>("/api/market/overview").catch(() => []),
        fetchAPI<DailyReviewResponse>("/api/market/daily-review").catch(() => ({ reviews: [] })),
      ]);
      setData(latest);
      setSectors(sectorData);
      setScanStatus(status);
      setLlmEnabled(health.llm_enabled);
      setIndices(overview);
      if (reviewData.reviews?.length > 0) {
        setDailyReview(reviewData.reviews[0].content);
      }
    } catch (e) {
      console.error("加载数据失败:", e);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

  useWebSocket(
    useCallback(() => {
      loadData();
    }, [loadData]),
    ["llm_analysis_ready", "sector_scan_ready", "scan_complete"]
  );

  const handleRefresh = async () => {
    setRefreshing(true);
    setRefreshResult(null);
    try {
      const res = await postAPI<{
        status: string;
        count: number;
        temperature: number;
        scan_mode: string;
        is_trading: boolean;
      }>("/api/recommendations/refresh?scan_session=manual");
      const modeLabel = res.scan_mode === "intraday" ? "盘中实时" : "盘后";
      setRefreshResult(`${modeLabel}扫描完成，发现 ${res.count} 只股票`);
      await loadData();
    } catch (e) {
      console.error("刷新失败:", e);
      setRefreshResult("扫描失败，请重试");
    } finally {
      setRefreshing(false);
      setTimeout(() => setRefreshResult(null), 5000);
    }
  };

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 md:px-8 pt-6 space-y-5">
        <div className="h-32 glass-card-static animate-shimmer" />
        <div className="h-48 glass-card-static animate-shimmer" />
        <div className="h-48 glass-card-static animate-shimmer" />
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 md:px-8 pt-6 pb-20 md:pb-10 space-y-6">
      {/* Header bar */}
      <div className="flex items-center justify-between animate-fade-in-up">
        <div>
          <h1 className="text-lg font-bold md:hidden tracking-tight">Dragon AI Agent</h1>
          {scanStatus && (
            <p className="text-xs text-text-muted mt-1">
              {scanStatus.is_trading ? (
                <span className="inline-flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse" />
                  <span className="text-emerald-400/80">交易中</span>
                  <span className="text-text-muted/40">·</span>
                  实时行情
                </span>
              ) : (
                <span className="inline-flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 bg-text-muted/40 rounded-full" />
                  已收盘
                  <span className="text-text-muted/40">·</span>
                  Tushare 日级数据
                </span>
              )}
            </p>
          )}
        </div>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          {user?.role === "admin" && (
        <button
          onClick={handleRefresh}
          disabled={refreshing}
          className="text-xs px-4 py-2 bg-gradient-to-r from-amber-500/20 to-amber-600/15 text-amber-400 rounded-xl hover:from-amber-500/30 hover:to-amber-600/25 disabled:opacity-40 transition-all duration-200 border border-amber-500/10 font-medium"
        >
          {refreshing ? (
            <span className="inline-flex items-center gap-1.5">
              <span className="w-3 h-3 border border-amber-400/40 border-t-amber-400 rounded-full animate-spin" />
              分析中...
            </span>
          ) : scanStatus?.is_trading ? (
            "盘中扫描"
          ) : (
            "立即扫描"
          )}
        </button>
        )}
        </div>
      </div>

      {/* Scan result toast */}
      {refreshResult && (
        <div className="glass-card-static border-amber-500/15 px-4 py-2.5 text-xs text-amber-400 animate-fade-in-up flex items-center gap-2">
          <span className="w-1 h-1 rounded-full bg-amber-400" />
          {refreshResult}
        </div>
      )}

      {/* Market temp + Sector heatmap */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <MarketTemp data={data?.market_temperature ?? null} indices={indices} />
        <SectorHeatmap sectors={sectors} />
      </div>

      {/* Daily Review */}
      <div className="animate-fade-in-up delay-100">
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
            每日复盘
          </h2>
          {llmEnabled && (
            <button
              onClick={async () => {
                setGeneratingReview(true);
                setRefreshResult(null);
                try {
                  const res = await postAPI<{ status: string; content?: string; message?: string }>("/api/market/generate-review");
                  if (res.status === "ok" && res.content) {
                    setDailyReview(res.content);
                  } else if (res.message) {
                    setRefreshResult(res.message);
                  }
                } catch (e) {
                  console.error("生成复盘失败:", e);
                  setRefreshResult("生成复盘失败，请重试");
                } finally {
                  setGeneratingReview(false);
                  setTimeout(() => setRefreshResult(null), 5000);
                }
              }}
              disabled={generatingReview}
              className="text-[10px] px-3 py-1.5 bg-surface-2 text-text-secondary rounded-lg hover:bg-surface-4 disabled:opacity-40 transition-all font-medium"
            >
              {generatingReview ? (
                <span className="inline-flex items-center gap-1">
                  <span className="w-2.5 h-2.5 border border-text-muted/40 border-t-text-muted rounded-full animate-spin" />
                  生成中...
                </span>
              ) : (
                dailyReview ? "重新生成" : "生成复盘"
              )}
            </button>
          )}
        </div>
        {dailyReview ? (
          <div className="glass-card-static p-5">
            <div
              className="text-xs text-text-secondary leading-relaxed prose prose-sm prose-invert max-w-none [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:text-amber-400 [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:first:mt-0 [&_p]:text-text-secondary [&_p]:mb-2 [&_ul]:text-text-secondary [&_li]:mb-1"
              dangerouslySetInnerHTML={{ __html: markdownToHtml(dailyReview) }}
            />
          </div>
        ) : (
          <div className="glass-card-static p-6 text-center">
            <div className="text-text-muted text-sm mb-1">暂无复盘报告</div>
            <div className="text-text-muted/50 text-xs">
              {llmEnabled ? "点击「生成复盘」AI自动分析" : "配置LLM后自动生成"}
            </div>
          </div>
        )}
      </div>

      {/* Recommendations */}
      <div className="animate-fade-in-up delay-150">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
            今日推荐
            {data?.recommendations?.length ? (
              <span className="text-text-primary ml-1.5 font-mono tabular-nums">{data.recommendations.length}</span>
            ) : ""}
          </h2>
          <a href="/recommendations" className="text-xs text-text-muted hover:text-amber-400 transition-colors flex items-center gap-1">
            查看全部
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M12 5l7 7-7 7" />
            </svg>
          </a>
        </div>

        {!data?.recommendations?.length ? (
          <div className="glass-card-static p-10 text-center">
            <div className="text-text-muted text-sm mb-1">暂无推荐</div>
            <div className="text-text-muted/60 text-xs">
              {user?.role === "admin" ? `点击 ${scanStatus?.is_trading ? "「盘中扫描」" : "「立即扫描」"} 开始分析` : "等待系统自动扫描更新"}
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {data.recommendations.slice(0, 6).map((rec) => (
              <StockCard key={rec.ts_code} rec={rec} showLLMLoading={llmEnabled} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}