"use client";

/**
 * 主页组件 - 上市公司基本面分析平台
 * 
 * 功能包括：
 * - 股票搜索和建议
 * - 财务数据查询和展示
 * - 表格行配置管理
 * - 执行状态显示
 * - 图表可视化
 */

import { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { StatusBar, useStatusBar } from "@/components/ui/status-bar";
import { createDefaultStepManager } from "@/lib/execution-step-manager";
import { RowSettingsPanel } from "@/components/ui/row-settings";
import { useRowConfig } from "@/hooks/use-row-config";
import { EnhancedTable } from "@/components/ui/enhanced-table";
import { Notification } from "@/components/ui/notification";
import {
  normalizeTsCode,
  flattenApiGroups,
  enhanceErrorMessage,
  isRetryableError,
  formatFinancialValue,
  getMetricUnit
} from "@/lib/financial-utils";
import type {
  MarketType,
  ChartType,
  CompanyInfo,
  CompanySuggestion,
  RevenueDataPoint,
  FinancialMetricConfig,
  FinancialDataSeries,
  ExecutionStep,
  BatchFinancialDataResponse,
  FinancialConfigResponse,
  SearchApiResponse,
  BatchDataRequest
} from "@/types";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

export default function Home() {
  // ============================================================================
  // 基础状态管理
  // ============================================================================
  const [market, setMarket] = useState<MarketType>("cn");
  const [query, setQuery] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");
  const [chartType, setChartType] = useState<ChartType>("bar");

  // ============================================================================
  // 数据状态管理
  // ============================================================================
  const [items, setItems] = useState<RevenueDataPoint[]>([]);
  const [selected, setSelected] = useState<CompanyInfo | null>(null);
  const [configItems, setConfigItems] = useState<FinancialMetricConfig[]>([]);
  const [metricSeries, setMetricSeries] = useState<FinancialDataSeries>({});
  const [selectedMetric, setSelectedMetric] = useState<string>("revenue");
  const [selectedMetricName, setSelectedMetricName] = useState<string>("营业收入");
  const [paramToGroup, setParamToGroup] = useState<Record<string, string>>({});
  const [paramToApi, setParamToApi] = useState<Record<string, string>>({});

  // ============================================================================
  // 搜索相关状态
  // ============================================================================
  const [suggestions, setSuggestions] = useState<CompanySuggestion[]>([]);
  const [typingTimer, setTypingTimer] = useState<NodeJS.Timeout | null>(null);

  // ============================================================================
  // 状态栏管理
  // ============================================================================
  const {
    statusBarState,
    showStatusBar,
    showSuccess,
    showError,
    hideStatusBar
  } = useStatusBar();

  // ============================================================================
  // 执行步骤管理
  // ============================================================================
  const [stepManager] = useState(() => {
    return createDefaultStepManager({
      onStepStart: (step: ExecutionStep, index: number, total: number) => {
        showStatusBar(step, index, total);
      },
      onStepComplete: (_step: ExecutionStep, index: number, total: number) => {
        // If there are more steps, update to next step
        if (index < total - 1) {
          // This will be handled by the next step start
        } else {
          // All steps completed
          showSuccess();
        }
      },
      onStepError: (_step: ExecutionStep, _index: number, _total: number, error: Error) => {
        // 判断错误是否可重试
        const isRetryable = isRetryableError(error) || stepManager.canRetry();
        showError(error.message, isRetryable);
      },
      onComplete: () => {
        showSuccess();
      },
      onError: (error: Error) => {
        // 判断错误是否可重试
        const isRetryable = isRetryableError(error) || stepManager.canRetry();
        showError(error.message, isRetryable);
      }
    });
  });

  // ============================================================================
  // 表格行配置管理
  // ============================================================================
  const [isRowSettingsPanelOpen, setIsRowSettingsPanelOpen] = useState(false);

  // Row configuration management - memoize to prevent infinite re-renders
  const rowIds = useMemo(() =>
    configItems.map(item => item.tushareParam || '').filter(Boolean),
    [configItems]
  );

  const {
    rowConfigs,
    customRows,
    updateRowConfig,
    saveStatus,
    clearSaveStatus,
    addCustomRow,
    deleteCustomRow,
    updateRowOrder
  } = useRowConfig(selected?.ts_code || null, rowIds);

  const rowDisplayTexts = useMemo(() => {
    const texts = configItems.reduce((acc, item) => {
      if (item.tushareParam) {
        acc[item.tushareParam] = item.displayText;
      }
      return acc;
    }, {} as Record<string, string>);

    // 添加自定义行的显示文本
    Object.entries(customRows).forEach(([rowId, customRow]) => {
      texts[rowId] = customRow.displayText;
    });

    return texts;
  }, [configItems, customRows]);

  // ============================================================================
  // 搜索建议功能
  // ============================================================================

  /**
   * 获取搜索建议
   * @param text - 搜索文本
   */
  async function fetchSuggestions(text: string): Promise<void> {
    if (market !== "cn") {
      setSuggestions([]);
      return;
    }

    const searchQuery = (text || "").trim();
    if (!searchQuery) {
      setSuggestions([]);
      return;
    }

    try {
      const response = await fetch(
        `http://localhost:8000/api/search?query=${encodeURIComponent(searchQuery)}&limit=8`
      );
      const data: SearchApiResponse = await response.json();
      const suggestions = Array.isArray(data?.items) ? data.items : [];
      setSuggestions(suggestions);
    } catch (error) {
      console.warn('Failed to fetch suggestions:', error);
      setSuggestions([]);
    }
  }

  // ============================================================================
  // 搜索处理功能
  // ============================================================================

  /**
   * 重试搜索的函数
   */
  const retrySearch = async (): Promise<void> => {
    if (stepManager.canRetry()) {
      try {
        await stepManager.retry();
      } catch {
        // 错误已经在stepManager中处理
      }
    } else {
      // 如果不能重试，重新执行搜索
      await handleSearch();
    }
  };

  /**
   * 处理搜索请求
   */
  async function handleSearch(): Promise<void> {
    // 重置状态
    setError("");
    setItems([]);
    setMetricSeries({});
    setConfigItems([]);
    setSelectedMetric("revenue");

    // 验证市场支持
    if (market !== "cn") {
      setError("目前仅支持 A 股查询，请选择\"中国\"市场。");
      return;
    }

    // 获取并验证股票代码
    const tsCode = selected?.ts_code || normalizeTsCode(query);
    if (!tsCode) {
      setError("请输入有效的 A 股股票代码（如 600519 / 000001 或带后缀 600519.SH）。");
      return;
    }

    setLoading(true);

    try {
      // 创建搜索执行步骤
      const searchStep: ExecutionStep = {
        id: 'fetch_financial_data',
        name: '正在读取财务数据',
        description: '从Tushare API获取公司财务指标数据',
        execute: async () => {
          await executeSearchStep(tsCode);
        }
      };

      // 清空之前的步骤并添加新的搜索步骤
      stepManager.clearSteps();
      stepManager.addStep(searchStep);

      // 执行搜索步骤
      await stepManager.execute();

    } catch (error) {
      const errorMsg = enhanceErrorMessage(error);
      setError(errorMsg);
      // 错误处理已经在stepManager的回调中处理
    } finally {
      setLoading(false);
    }
  }

  /**
   * 执行搜索步骤的具体逻辑
   * @param tsCode - 股票代码
   */
  async function executeSearchStep(tsCode: string): Promise<void> {
    // 1) 获取配置（tushare专用），解析 api_groups -> 扁平 items
    const configResponse = await fetch(`http://localhost:8000/api/financial-config`);
    const configData: FinancialConfigResponse = await configResponse.json();
    const groups = configData?.api_groups || {};

    const { items, groupMap, apiMap } = flattenApiGroups(groups);
    setConfigItems(items);
    setParamToGroup(groupMap);
    setParamToApi(apiMap);

    // 2) 批量请求年度序列（同API字段合并读取）
    const years = 10;
    const metrics = Array.from(new Set(["revenue", ...items.map(i => i.tushareParam)]));

    const batchRequest: BatchDataRequest = {
      ts_code: tsCode,
      years,
      metrics
    };

    const batchResponse = await fetch(
      `http://localhost:8000/api/financialdata/${encodeURIComponent(market)}/batch`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(batchRequest),
      }
    );

    const batchData: BatchFinancialDataResponse = await batchResponse.json();
    const seriesObj = batchData?.series || {};

    // 处理数据系列
    const processedSeries: FinancialDataSeries = {};
    for (const metric of metrics) {
      const series = Array.isArray(seriesObj[metric]) ? seriesObj[metric] : [];
      processedSeries[metric] = [...series].sort((a, b) => Number(a.year) - Number(b.year));
    }
    setMetricSeries(processedSeries);

    // 3) 设置选中公司与默认图表序列（收入）
    setSelected({
      ts_code: batchData?.ts_code || tsCode,
      name: batchData?.name
    });

    const revenueSeries = processedSeries["revenue"] || [];
    setItems(revenueSeries.map(d => ({ year: d.year, revenue: d.value })));

    const revenueName = items.find(i => i.tushareParam === "revenue")?.displayText || "营业收入";
    setSelectedMetricName(revenueName);

    if (revenueSeries.length === 0) {
      throw new Error("未查询到数据，请确认代码或稍后重试。");
    }
  }

  // ============================================================================
  // 渲染组件
  // ============================================================================

  return (
    <div className="space-y-8">
      {/* StatusBar Component */}
      <StatusBar
        isVisible={statusBarState.isVisible}
        currentStep={statusBarState.currentStep}
        stepIndex={statusBarState.stepIndex}
        totalSteps={statusBarState.totalSteps}
        status={statusBarState.status}
        errorMessage={statusBarState.errorMessage}
        onDismiss={hideStatusBar}
        onRetry={retrySearch}
        retryable={statusBarState.retryable}
      />

      {/* Configuration Save Status Notification */}
      {saveStatus.status !== 'idle' && (
        <Notification
          message={saveStatus.message || ''}
          type={saveStatus.status === 'success' ? 'success' : saveStatus.status === 'error' ? 'error' : 'info'}
          isVisible={true}
          onDismiss={clearSaveStatus}
          position="bottom-right"
          autoHide={saveStatus.status === 'success'}
          autoHideDelay={2000}
        />
      )}

      {/* Row Settings Panel */}
      <RowSettingsPanel
        isOpen={isRowSettingsPanelOpen}
        onClose={() => setIsRowSettingsPanelOpen(false)}
        rowConfigs={rowConfigs}
        rowDisplayTexts={rowDisplayTexts}
        onConfigChange={updateRowConfig}
        onRowOrderChange={updateRowOrder}
        onDeleteCustomRow={deleteCustomRow}
        enableRowReordering={true}
      />

      <section className="space-y-3">
        <h1 className="text-2xl font-semibold">上市公司基本面分析</h1>
        <p className="text-sm text-muted-foreground">
          使用 Next.js + shadcn/ui 构建。你可以在此搜索公司、查看财报与关键指标。
        </p>
        <div className="flex gap-2 max-w-xl relative">
          <Select value={market} onValueChange={(v) => setMarket(v as MarketType)}>
            <SelectTrigger className="w-28 sm:w-40" aria-label="选择市场">
              <SelectValue placeholder="选择市场" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="cn">中国</SelectItem>
              <SelectItem value="us">美国</SelectItem>
              <SelectItem value="hk">香港</SelectItem>
              <SelectItem value="jp">日本</SelectItem>
              <SelectItem value="other">其他</SelectItem>
            </SelectContent>
          </Select>
          <Input
            placeholder="输入股票代码或公司名，例如 600519 / 000001 / 贵州茅台"
            value={query}
            onChange={(e) => {
              const v = e.target.value;
              setQuery(v);
              setSelected(null);
              if (typingTimer) clearTimeout(typingTimer);
              const t = setTimeout(() => fetchSuggestions(v), 250);
              setTypingTimer(t);
            }}
          />
          {/* 下拉建议 */}
          {suggestions.length > 0 && (
            <div className="absolute top-12 left-0 right-0 z-10 bg-white border rounded shadow">
              {suggestions.map((s, i) => (
                <div
                  key={s.ts_code + i}
                  className="px-3 py-2 hover:bg-gray-100 cursor-pointer flex justify-between"
                  onClick={() => {
                    setQuery(`${s.ts_code} ${s.name}`);
                    setSelected({ ts_code: s.ts_code, name: s.name });
                    setSuggestions([]);
                  }}
                >
                  <span>{s.name}</span>
                  <span className="text-muted-foreground">{s.ts_code}</span>
                </div>
              ))}
            </div>
          )}
          <Button onClick={handleSearch} disabled={loading}>
            {loading ? "查询中..." : "搜索"}
          </Button>
        </div>
        {error && <Badge variant="secondary">{error}</Badge>}
      </section>

      <section>
        {items.length > 0 && (
          <Card>
            <CardHeader>
              <div className="flex items-start justify-between gap-4">
                <div>
                  <CardTitle>近10年指标（A股）</CardTitle>
                  <CardDescription>数据来自 Tushare，{selected && selected.name ? `${selected.name} (${selected.ts_code})` : selected?.ts_code}</CardDescription>
                </div>
                <div className="mt-1">
                  <Select value={chartType} onValueChange={(v) => setChartType(v as ChartType)}>
                    <SelectTrigger className="w-40" aria-label="选择图表类型">
                      <SelectValue placeholder="选择图表类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="bar">柱状图</SelectItem>
                      <SelectItem value="line">点线图</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* 使用 Recharts 渲染图表（动态单位） */}
              {(() => {
                // 获取当前选中指标的信息
                const currentMetricInfo = configItems.find(ci => (ci.tushareParam || "") === selectedMetric);
                const metricGroup = currentMetricInfo?.group;
                const metricApi = currentMetricInfo?.api;
                const metricUnit = getMetricUnit(metricGroup, metricApi, selectedMetric);

                // 构建完整的图例名称
                const legendName = `${selectedMetricName}${metricUnit}`;

                // 根据指标类型确定数据缩放和单位
                const shouldScaleToYi = (
                  metricGroup === "income" ||
                  metricGroup === "balancesheet" ||
                  metricGroup === "cashflow" ||
                  selectedMetric === "total_mv"
                );

                const chartData = items.map((d) => {
                  let scaledValue = typeof d.revenue === "number" ? d.revenue : 0;

                  if (shouldScaleToYi) {
                    // 对于财务报表数据，转换为亿元
                    if (selectedMetric === "total_mv") {
                      // 市值从万元转为亿元
                      scaledValue = scaledValue / 1e4;
                    } else {
                      // 其他财务数据从元转为亿元
                      scaledValue = scaledValue / 1e8;
                    }
                  }

                  return {
                    year: d.year,
                    metricValue: scaledValue,
                  };
                });

                return (
                  <div className="w-full h-[320px]">
                    <ResponsiveContainer width="100%" height="100%">
                      {chartType === "bar" ? (
                        <BarChart data={chartData} margin={{ top: 16, right: 16, left: 8, bottom: 16 }}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="year" />
                          <YAxis tickFormatter={(v) => `${Math.round(v)}`} />
                          <Tooltip formatter={(value) => {
                            const v = Number(value);
                            const nf1 = new Intl.NumberFormat("zh-CN", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
                            const nf0 = new Intl.NumberFormat("zh-CN", { maximumFractionDigits: 0 });

                            if (shouldScaleToYi) {
                              if (selectedMetric === "total_mv") {
                                return [`${nf0.format(Math.round(v))} 亿元`, selectedMetricName];
                              } else {
                                return [`${nf1.format(v)} 亿元`, selectedMetricName];
                              }
                            } else {
                              return [`${nf1.format(v)}`, selectedMetricName];
                            }
                          }} />
                          <Legend />
                          <Bar dataKey="metricValue" name={legendName} fill="#4f46e5" />
                        </BarChart>
                      ) : (
                        <LineChart data={chartData} margin={{ top: 16, right: 16, left: 8, bottom: 16 }}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="year" />
                          <YAxis tickFormatter={(v) => `${Math.round(v)}`} />
                          <Tooltip formatter={(value) => {
                            const v = Number(value);
                            const nf1 = new Intl.NumberFormat("zh-CN", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
                            const nf0 = new Intl.NumberFormat("zh-CN", { maximumFractionDigits: 0 });

                            if (shouldScaleToYi) {
                              if (selectedMetric === "total_mv") {
                                return [`${nf0.format(Math.round(v))} 亿元`, selectedMetricName];
                              } else {
                                return [`${nf1.format(v)} 亿元`, selectedMetricName];
                              }
                            } else {
                              return [`${nf1.format(v)}`, selectedMetricName];
                            }
                          }} />
                          <Legend />
                          <Line type="monotone" dataKey="metricValue" name={legendName} stroke="#4f46e5" dot />
                        </LineChart>
                      )}
                    </ResponsiveContainer>
                  </div>
                );
              })()}

              {/* 增强数据表格 */}
              {(() => {
                const series = metricSeries;
                const allYears = Object.values(series)
                  .flat()
                  .map(d => d.year);
                if (allYears.length === 0) return null;
                const yearsDesc = Array.from(new Set(allYears)).sort((a, b) => Number(b) - Number(a));
                const columns = yearsDesc;

                function valueOf(m: string, year: string): number | null | undefined {
                  const s = series[m] || [];
                  const f = s.find(d => d.year === year);
                  return f ? f.value : undefined;
                }

                function fmtCell(m: string, y: string): string {
                  const v = valueOf(m, y);
                  const group = paramToGroup[m] || "";
                  const api = paramToApi[m] || "";
                  return formatFinancialValue(v, group, api, m);
                }

                // 行点击切换图表数据源
                function onRowClick(m: string) {
                  setSelectedMetric(m);
                  // 指标中文名传给图表
                  const rowInfo = configItems.find(ci => (ci.tushareParam || "") === m);
                  setSelectedMetricName(rowInfo?.displayText || m);
                  const s = series[m] || [];
                  setItems(s.map(d => ({ year: d.year, revenue: d.value })));
                }

                // 准备表格数据
                const baseTableData = configItems.map((row, idx) => {
                  const m = (row.tushareParam || "").trim();
                  const values: Record<string, string> = {};

                  if (m) {
                    columns.forEach(year => {
                      values[year] = fmtCell(m, year);
                    });
                  } else {
                    columns.forEach(year => {
                      values[year] = "-";
                    });
                  }

                  return {
                    id: m || `row_${idx}`,
                    displayText: row.displayText + getMetricUnit(row.group, row.api, row.tushareParam),
                    values,
                    group: row.group,
                    api: row.api,
                    tushareParam: row.tushareParam,
                    isCustomRow: false
                  };
                });

                // 添加自定义行数据（仅分隔线）
                const customRowData = Object.entries(customRows)
                  .filter(([, customRow]) => customRow.customRowType === 'separator')
                  .map(([rowId, customRow]) => {
                    const values: Record<string, string> = {};
                    columns.forEach(year => {
                      values[year] = "-"; // 分隔线不显示数据
                    });

                    return {
                      id: rowId,
                      displayText: customRow.displayText,
                      values,
                      isCustomRow: true,
                      customRowType: customRow.customRowType
                    };
                  });

                // 合并基础数据和自定义行数据
                const tableData = [...baseTableData, ...customRowData];

                return (
                  <EnhancedTable
                    data={tableData}
                    columns={columns}
                    rowConfigs={rowConfigs}
                    selectedRowId={selectedMetric}
                    onRowClick={onRowClick}
                    onRowConfigChange={updateRowConfig}
                    onOpenSettings={() => setIsRowSettingsPanelOpen(true)}
                    onAddCustomRow={addCustomRow}
                    onDeleteCustomRow={deleteCustomRow}
                    onRowOrderChange={updateRowOrder}
                    enableAnimations={true}
                    animationDuration={300}
                    enableVirtualization={configItems.length > 50}
                    maxVisibleRows={50}
                    enableRowDragging={true}
                  />
                );
              })()}
            </CardContent>
          </Card>
        )}
      </section>
    </div>
  );
}