'use client';

import * as React from 'react';
import { personaFeatureDisplay, personaFeatureMeta } from '@pac/types';
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card';

/**
 * PersonaFeatureHover — 画像标签的「怎么算的」说明卡。
 *
 * 内容来自 `@pac/types` 的 PERSONA_FEATURE_SPECS[key].display —— 与后端 extractor 的口径
 * (同一份标签卡里的 algorithm 字段)贴脸放。**前端不再自己维护一份算法字典**:
 * 原来这里硬编的 ALGORITHMS 已经和后端漂了 —— 权益身份只列 2 类(实际 5 类)、还承诺
 * "显示保司 + 最近日期"(数据里根本没有);转介绍达人把门槛写成"推外人≥3人"(真实口径是
 * 推荐≥3人**且**带来成交)。客服是照着这段话跟患者讲的,说明写错比不写更糟。
 *
 * 触发器(children)由调用方给 —— 抽屉里是卡片右上角的 ? 按钮,标签云里是 chip 本身。
 */
export function PersonaFeatureHover({
  featureKey,
  value,
  children,
}: {
  featureKey: string;
  /// 该患者的实际取值(展示在说明卡顶部,先说"你是什么"再说"怎么算的")
  value?: string;
  children: React.ReactNode;
}) {
  const display = personaFeatureDisplay(featureKey);
  if (!display && !value) return <>{children}</>;
  const title = personaFeatureMeta(featureKey).label;

  return (
    <HoverCard openDelay={150} closeDelay={80}>
      {/* 直接把 children 作为 trigger,radix 锚定 children 本身的位置(避免多包一层 0 尺寸 span)*/}
      <HoverCardTrigger asChild>{children}</HoverCardTrigger>
      {/* z-[70]:抽屉面板是 z-[60],默认 hovercard z-50 会被抽屉盖住(详情抽屉里 ? hover 不显的根因) */}
      <HoverCardContent align="end" sideOffset={6} className="z-[70] w-80 p-3 text-[11.5px]">
        <div className="space-y-2">
          <div className="flex items-baseline justify-between gap-2 border-b border-slate-100 pb-1.5">
            <span className="text-[13px] font-semibold text-slate-900">{title}</span>
            {display && (
              <span className="text-right text-[10.5px] text-slate-500">{display.subtitle}</span>
            )}
          </div>
          {/* 本患者实际取值 */}
          {value && (
            <div className="rounded bg-teal-50 px-2 py-1.5 text-[11px] leading-relaxed text-teal-800">
              {value}
            </div>
          )}
          {display && (
            <ul className="space-y-1 leading-relaxed text-slate-600">
              {display.rules.map((r, i) => (
                <li key={i} className="flex gap-2">
                  <span className="flex-none text-slate-400">·</span>
                  {/* 两列对照:加粗取值 + 短说明。客服先扫左边找到自己要的那个取值,再读右边 */}
                  <span>
                    <strong className="mr-1 text-slate-800">{r.label}</strong>
                    {r.body}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}
