import type { SimilarComparison } from "../lib/api";

/** 現在 vs 歷史相似期的指標對照（橫條圖，非 emoji） */
export default function IndicatorCompareBars({ rows }: { rows: SimilarComparison[] }) {
  if (!rows.length) return <p className="muted small">尚無指標對照資料。</p>;

  const maxZ = Math.max(3, ...rows.flatMap((r) => [Math.abs(r.zNow), Math.abs(r.zThen)]));

  return (
    <div className="compare-bars">
      {rows.map((r) => (
        <div className="compare-row" key={r.key}>
          <div className="compare-head">
            <span className="compare-label">{r.label}</span>
            <span className={"compare-closeness " + closenessClass(r.closeness)}>{r.closeness}</span>
            {r.weightPct != null && <span className="compare-weight">{r.weightPct}% 影響</span>}
          </div>
          <div className="compare-values">
            <span className="compare-now">現在 {r.nowText ?? "—"}</span>
            <span className="compare-then">當時 {r.thenText ?? "—"}</span>
          </div>
          <div className="compare-tracks">
            <div className="compare-track">
              <span className="track-tag">現在</span>
              <div className="track-bar">
                <div
                  className="track-fill now"
                  style={{ width: `${(Math.abs(r.zNow) / maxZ) * 100}%`, marginLeft: r.zNow < 0 ? "auto" : undefined }}
                />
              </div>
            </div>
            <div className="compare-track">
              <span className="track-tag">當時</span>
              <div className="track-bar">
                <div
                  className="track-fill then"
                  style={{ width: `${(Math.abs(r.zThen) / maxZ) * 100}%`, marginLeft: r.zThen < 0 ? "auto" : undefined }}
                />
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function closenessClass(c: string) {
  if (c === "極像") return "up";
  if (c === "相近") return "cool";
  if (c === "有差") return "gold";
  return "down";
}