"use client";

import { getLevelBadge } from "@/lib/utils";
import type { RecommendationData } from "@/lib/api";

export default function StockCard({ rec }: { rec: RecommendationData }) {
  const badge = getLevelBadge(rec.level);
  const aiConviction = rec.llm_score != null ? Math.round(rec.llm_score) : null;
  const recallLabels: Record<string, string> = {
    sector_recall: "主线召回",
    trend_scan: "趋势召回",
    intraday_active: "盘中异动",
    hot_sector_core: "板块核心",
    sector_leader: "前排线索",
    moneyflow_support: "资金支撑",
    volume_active: "量能活跃",
  };
  const prefilterLabel: Record<string, string> = {
    priority: "AI优先深看",
    watch: "AI保留观察",
    ignore: "AI建议忽略",
    "": "待AI预筛",
  };

  // 入场信号标签
  const signalTypeMap: Record<string, { label: string; style: string }> = {
    breakout: { label: "突破型", style: "bg-red-500/15 text-red-400 border-red-500/20" },
    pullback: { label: "回踩型", style: "bg-blue-500/15 text-blue-400 border-blue-500/20" },
    launch: { label: "启动型", style: "bg-orange-500/15 text-orange-400 border-orange-500/20" },
  };
  // 向后兼容：旧数据使用 strategy 字段
  const signalInfo = signalTypeMap[rec.entry_signal_type || ""];
  const legacyStrategy = rec.strategy === "potential"
    ? { label: "潜在启动", style: "bg-cyan-500/15 text-cyan-400 border-cyan-500/20" }
    : rec.strategy === "momentum"
    ? { label: "强中选强", style: "bg-amber-500/15 text-amber-400 border-amber-500/20" }
    : null;
  const tag = signalInfo || legacyStrategy;
  const actionPlanStyle: Record<string, string> = {
    "可操作": "bg-red-500/15 text-red-400 border-red-500/20",
    "重点关注": "bg-amber-500/15 text-amber-400 border-amber-500/20",
    "观察": "bg-surface-3 text-text-muted border-border-default",
  };
  const lifecycleLabel: Record<string, string> = {
    candidate: "观察池",
    actionable: "可操作",
    tracking: "跟踪中",
    closed_win: "盈利结束",
    closed_loss: "亏损结束",
    expired: "到期复盘",
    invalidated: "已失效",
  };
  const actionPlanCopy: Record<string, string> = {
    "可操作": "触发条件成立时才执行",
    "重点关注": "等待确认，不提前交易",
    "观察": "只记录，不主动出手",
  };
  const evidence = [
    rec.prefilter_reason,
    rec.focus_points?.[0],
    rec.reasons?.[0],
    rec.entry_timing,
    rec.data_freshness,
  ].filter(Boolean).slice(0, 3) as string[];

  return (
    <div className="glass-card p-4 group">
      {/* Clickable top section — navigates to stock detail */}
      <a href={`/stock/${rec.ts_code}`} className="block">
        {/* Header: Name + Action state */}
        <div className="flex items-start justify-between mb-3">
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-1.5 flex-wrap">
              <span className="font-semibold text-sm tracking-tight">{rec.name}</span>
              {rec.signal === "BUY" && (
                <span className="text-[10px] px-1.5 py-0.5 rounded-md font-medium bg-red-500/15 text-red-400 border border-red-500/20">
                  买入
                </span>
              )}
              {tag && (
                <span className={`text-[10px] px-1.5 py-0.5 rounded-md font-medium border ${tag.style}`}>
                  {tag.label}
                </span>
              )}
              {rec.action_plan && (
                <span className={`text-[10px] px-1.5 py-0.5 rounded-md font-medium border ${actionPlanStyle[rec.action_plan] ?? actionPlanStyle["观察"]}`}>
                  {rec.action_plan}
                </span>
              )}
            </div>
            <div className="text-[11px] text-text-muted mt-1 font-mono tabular-nums">
              {rec.ts_code} · {rec.sector}
            </div>
          </div>
          <div className="text-right shrink-0 ml-3">
            <div className="text-[10px] text-text-muted uppercase tracking-wider">结论</div>
            <div className="text-xs text-text-secondary mt-0.5">{rec.action_plan ?? "观察"}</div>
            {aiConviction != null ? (
              <div className="text-[10px] font-mono tabular-nums text-cyan-400/80 mt-0.5">
                AI {aiConviction}/10
              </div>
            ) : null}
          </div>
        </div>

        {(rec.action_plan || rec.trigger_condition || rec.invalidation_condition || rec.suggested_position_pct) && (
          <div className="mb-3 rounded-xl bg-surface-1/70 border border-border-subtle p-3">
            <div className="flex items-center justify-between gap-2 mb-2">
              <div className="text-[10px] text-text-muted uppercase tracking-wider font-semibold">AI 操作计划</div>
              <span className={`text-[10px] px-2 py-0.5 rounded-full border ${rec.action_plan ? actionPlanStyle[rec.action_plan] ?? actionPlanStyle["观察"] : actionPlanStyle["观察"]}`}>
                {rec.action_plan ? actionPlanCopy[rec.action_plan] ?? rec.action_plan : "等待结论"}
              </span>
            </div>
            {rec.trigger_condition && (
              <div className="text-[11px] text-text-secondary leading-relaxed line-clamp-2">
                触发：{rec.trigger_condition}
              </div>
            )}
            {rec.invalidation_condition && (
              <div className="text-[11px] text-text-muted leading-relaxed line-clamp-2 mt-1">
                失效：{rec.invalidation_condition}
              </div>
            )}
            <div className="flex flex-wrap items-center gap-2 mt-2 text-[10px] text-text-muted">
              {rec.suggested_position_pct != null && (
                <span className="rounded-md bg-surface-2 px-2 py-1">
                  仓位 {rec.suggested_position_pct}%
                </span>
              )}
              {rec.review_after_days ? (
                <span className="rounded-md bg-surface-2 px-2 py-1">
                  {rec.review_after_days}日复盘
                </span>
              ) : null}
              {aiConviction != null ? (
                <span className="rounded-md bg-cyan-500/[0.06] border border-cyan-500/10 px-2 py-1 text-cyan-400/80">
                  AI置信 {aiConviction}/10
                </span>
              ) : rec.score ? (
                <span className="rounded-md bg-surface-2 px-2 py-1 text-text-secondary">
                  参考分 {rec.score.toFixed(0)}
                </span>
              ) : null}
              <span className={`rounded-md px-2 py-1 ${badge.bg} ${badge.text}`}>
                {rec.level}
              </span>
            </div>
          </div>
        )}

        {evidence.length > 0 && (
          <div className="mb-3 rounded-xl bg-surface-1/60 border border-border-subtle px-3 py-2.5">
            <div className="text-[10px] text-text-muted uppercase tracking-wider font-semibold mb-2">AI 关注点</div>
            <div className="space-y-1.5">
              {evidence.map((item, index) => (
                <div key={`${rec.ts_code}-evidence-${index}`} className="text-[11px] text-text-secondary flex items-start gap-2">
                  <span className="w-1 h-1 rounded-full bg-amber-500/60 mt-[6px] shrink-0" />
                  <span className="leading-relaxed line-clamp-2">{item}</span>
                </div>
              ))}
            </div>
            <div className="flex flex-wrap items-center gap-2 mt-2.5 text-[10px] text-text-muted">
              {(rec.recall_tags ?? []).slice(0, 3).map((tag) => (
                <span key={`${rec.ts_code}-${tag}`} className="rounded-md bg-surface-2 px-2 py-1">
                  {recallLabels[tag] ?? tag}
                </span>
              ))}
              <span className="rounded-md bg-cyan-500/[0.06] border border-cyan-500/10 px-2 py-1 text-cyan-400/80">
                {prefilterLabel[rec.prefilter_decision ?? ""] ?? "AI预筛"}
              </span>
            </div>
          </div>
        )}

        {(rec.focus_points?.length ?? 0) > 0 && (
          <div className="mb-3 rounded-xl bg-surface-1/60 border border-border-subtle px-3 py-2.5">
            <div className="text-[10px] text-text-muted uppercase tracking-wider font-semibold mb-2">深裁决前重点观察</div>
            <div className="space-y-1.5">
              {(rec.focus_points ?? []).slice(0, 3).map((item, index) => (
                <div key={`${rec.ts_code}-focus-${index}`} className="text-[11px] text-text-secondary flex items-start gap-2">
                  <span className="w-1 h-1 rounded-full bg-cyan-400/70 mt-[6px] shrink-0" />
                  <span className="leading-relaxed line-clamp-2">{item}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Price reference */}
        {rec.entry_price && (
          <div className="grid grid-cols-3 gap-2 mb-2 bg-surface-1/60 rounded-lg px-3 py-2 border border-border-subtle">
            <div>
              <span className="text-text-muted/60 block text-[10px]">买入</span>
              <span className="text-red-400 font-mono tabular-nums text-xs">{rec.entry_price}</span>
            </div>
            <div>
              <span className="text-text-muted/60 block text-[10px]">目标</span>
              <span className="text-amber-400 font-mono tabular-nums text-xs">{rec.target_price}</span>
            </div>
            <div>
              <span className="text-text-muted/60 block text-[10px]">止损</span>
              <span className="text-emerald-400 font-mono tabular-nums text-xs">{rec.stop_loss}</span>
            </div>
          </div>
        )}

        {rec.tracking && (
          <div className="mb-3 bg-surface-1/60 rounded-lg px-3 py-2 border border-border-subtle">
            <div className="flex items-center justify-between mb-2">
              <span className="text-[10px] text-text-muted">
                生命周期 · {lifecycleLabel[rec.lifecycle_status || ""] ?? rec.lifecycle_status ?? "跟踪"}
              </span>
              <span className="text-[10px] text-text-muted font-mono tabular-nums">
                {rec.tracking.days_since_recommendation ?? 0}日 · {rec.tracking.track_date}
              </span>
            </div>
            <div className="grid grid-cols-3 gap-2">
              <TrackingMetric
                label="当前"
                value={rec.tracking.pct_from_entry}
              />
              <TrackingMetric
                label="最大浮盈"
                value={rec.tracking.max_return_pct}
              />
              <TrackingMetric
                label="最大回撤"
                value={rec.tracking.max_drawdown_pct}
              />
            </div>
            {rec.tracking.review_note && (
              <div className="text-[11px] text-text-muted leading-relaxed mt-2 line-clamp-2">
                {rec.tracking.review_note}
              </div>
            )}
          </div>
        )}

        {/* Reasons */}
        <div className="space-y-1.5">
          {rec.reasons.slice(0, 3).map((r, i) => (
            <div key={i} className="text-xs text-text-secondary flex items-start gap-2">
              <span className="w-1 h-1 rounded-full bg-amber-500/60 mt-[6px] shrink-0" />
              <span className="leading-relaxed line-clamp-2">{r}</span>
            </div>
          ))}
        </div>
      </a>

      <div className="mt-3 border-t border-border-subtle pt-2 flex items-center justify-between gap-3 text-[11px]">
        <div className="text-text-muted">
          召回、预筛与推演链路已归档
          {aiConviction != null && (
            <span className="ml-2 font-mono tabular-nums text-cyan-400/80">
              AI {aiConviction}/10
            </span>
          )}
        </div>
        <a href={`/stock/${rec.ts_code}`} className="shrink-0 text-cyan-400/80 hover:text-cyan-400 transition-colors">
          查看推演
        </a>
      </div>

      {/* Risk note */}
      {rec.risk_note && (
        <div className="mt-2 text-[11px] text-amber-500/50 bg-amber-500/[0.04] rounded-lg px-3 py-1.5">
          ⚠ {rec.risk_note}
        </div>
      )}
    </div>
  );
}

function TrackingMetric({ label, value }: { label: string; value: number | null }) {
  const num = value ?? 0;
  const color = num > 0 ? "text-red-400" : num < 0 ? "text-emerald-400" : "text-text-secondary";
  return (
    <div>
      <div className="text-[10px] text-text-muted/60 mb-0.5">{label}</div>
      <div className={`text-xs font-mono tabular-nums font-semibold ${color}`}>
        {num > 0 ? "+" : ""}{num.toFixed(2)}%
      </div>
    </div>
  );
}