(()=>{
// === Shared UI components ===
const { RiskBar } = window.Viz;

const Card = ({ children, className="", title, kicker, action }) => (
  <div className={`card shadow-card ${className}`}>
    {(title || kicker || action) && (
      <div className="flex items-start justify-between px-5 pt-4 pb-3 border-b border-ink-100">
        <div>
          {kicker && <div className="text-[10px] tracking-[0.12em] uppercase text-ink-400 num mb-1">{kicker}</div>}
          {title && <div className="text-sm font-semibold text-ink-900">{title}</div>}
        </div>
        {action && <div>{action}</div>}
      </div>
    )}
    <div className="px-5 py-4">{children}</div>
  </div>
);

const Btn = ({ children, variant="primary", size="md", icon, iconRight, onClick, disabled, className="", title }) => {
  const v = {
    primary: "bg-clinic-600 hover:bg-clinic-700 text-white border-clinic-700 shadow-sm",
    ghost:   "bg-white hover:bg-ink-50 text-ink-700 border-ink-200",
    soft:    "bg-clinic-100 hover:bg-clinic-200 text-clinic-700 border-clinic-200",
    danger:  "bg-risk-high text-white border-risk-high",
    success: "bg-mint-600 hover:bg-mint-700 text-white border-mint-700",
  }[variant];
  const sz = {
    sm: "px-3 h-8 text-xs",
    md: "px-4 h-10 text-sm",
    lg: "px-5 h-12 text-base",
  }[size];
  return (
    <button onClick={onClick} disabled={disabled} title={title}
      className={`inline-flex items-center gap-2 rounded-md border font-medium transition-all ${v} ${sz} ${disabled?"opacity-50 cursor-not-allowed":""} ${className}`}>
      {icon && <Icon name={icon} size={size==="sm"?14:16}/>}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={size==="sm"?14:16}/>}
    </button>
  );
};

const Badge = ({ children, color="ink", className="" }) => {
  const map = {
    ink: "bg-ink-100 text-ink-700 border-ink-200",
    blue:"bg-clinic-100 text-clinic-700 border-clinic-200",
    green:"bg-mint-100 text-mint-700 border-mint-200",
    red:"bg-risk-highSoft text-risk-high border-risk-high/30",
    amber:"bg-risk-midSoft text-risk-mid border-risk-mid/30",
    mono:"bg-white text-ink-700 border-ink-300",
  };
  return <span className={`inline-flex items-center gap-1 px-2 h-6 rounded text-[11px] font-medium border ${map[color]} ${className}`}>{children}</span>;
};

const RiskChip = ({ level }) => {
  const t = level === "high" ? "高风险" : level === "mid" ? "中风险" : "低风险";
  const c = level === "high" ? "red" : level === "mid" ? "amber" : "green";
  return <Badge color={c}>{t}</Badge>;
};

const Kicker = ({ children }) => (
  <div className="text-[10px] tracking-[0.18em] uppercase text-ink-400 num">{children}</div>
);

const SectionHeader = ({ kicker, title, sub, action }) => (
  <div className="flex items-end justify-between mb-5">
    <div>
      {kicker && <Kicker>{kicker}</Kicker>}
      <h2 className="text-2xl font-semibold text-ink-900 mt-1 serif-zh">{title}</h2>
      {sub && <p className="text-sm text-ink-500 mt-1 max-w-2xl">{sub}</p>}
    </div>
    {action}
  </div>
);

const StatTile = ({ label, value, unit, sub, level }) => {
  const color = level==="high" ? "text-risk-high" : level==="mid" ? "text-risk-mid" : level==="low" ? "text-risk-low" : "text-ink-900";
  return (
    <div className="card-tight p-4">
      <div className="text-[11px] text-ink-500">{label}</div>
      <div className={`mt-1 ${color}`}>
        <span className="num text-2xl font-semibold">{value}</span>
        {unit && <span className="text-xs ml-1 text-ink-500">{unit}</span>}
      </div>
      {sub && <div className="text-[11px] text-ink-400 mt-1">{sub}</div>}
    </div>
  );
};

const Stepper = ({ steps, current }) => (
  <div className="flex items-center gap-0 w-full">
    {steps.map((s,i)=>(
      <React.Fragment key={i}>
        <div className="flex flex-col items-center min-w-[80px]">
          <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs num font-semibold border-2
            ${i < current ? "bg-mint-600 border-mint-700 text-white" :
              i === current ? "bg-white border-clinic-600 text-clinic-700" :
              "bg-white border-ink-200 text-ink-400"}`}>
            {i < current ? <Icon name="check" size={14}/> : i+1}
          </div>
          <div className={`mt-1 text-[11px] ${i===current?"text-clinic-700 font-semibold":"text-ink-500"}`}>{s}</div>
        </div>
        {i < steps.length-1 && (
          <div className={`flex-1 h-px mx-1 ${i < current ? "bg-mint-500" : "stepper-line"}`}/>
        )}
      </React.Fragment>
    ))}
  </div>
);

const KV = ({ k, v, mono=true }) => (
  <div className="kv"><span className="k">{k}</span><span className={mono?"v":"v !font-sans"}>{v}</span></div>
);

const RiskCard = ({ risk, active, onClick }) => {
  const c = risk.level === "high" ? "border-risk-high/30 bg-risk-highSoft/40"
          : risk.level === "mid"  ? "border-risk-mid/30 bg-risk-midSoft/40"
          : "border-mint-200 bg-mint-50";
  const dot = risk.level === "high" ? "bg-risk-high" : risk.level === "mid" ? "bg-risk-mid" : "bg-risk-low";
  return (
    <button onClick={onClick} className={`w-full text-left card-tight border ${c} p-4 hover:shadow-cardHover transition-shadow ${active?"ring-2 ring-clinic-400":""}`}>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className={`w-2 h-2 rounded-full ${dot}`}/>
          <span className="text-sm font-semibold text-ink-900">{risk.name}</span>
        </div>
        <RiskChip level={risk.level}/>
      </div>
      <div className="flex items-end justify-between mt-3">
        <div>
          <div className="num text-3xl font-semibold text-ink-900">{risk.score}</div>
          <div className="text-[10px] text-ink-500 num">/ 100</div>
        </div>
        <div className="text-right">
          <div className="num text-xs flex items-center gap-1 text-ink-600">
            <Icon name={risk.trend>0?"trending-up":risk.trend<0?"trending-down":"arrow-right"} size={12}/>
            {risk.trend>0?"+":""}{risk.trend} (14d)
          </div>
        </div>
      </div>
      <div className="mt-3"><RiskBar score={risk.score} level={risk.level}/></div>
    </button>
  );
};
window.UI = { Card, Btn, Badge, RiskChip, Kicker, SectionHeader, StatTile, Stepper, KV, RiskCard };

})();