// vote.jsx — YES/NO 투표 컴포넌트 (3종 변형) + 증권사 행
const { won, pct, upside } = window.fmt;
const GaugeBar = window.GaugeBar;

// ─────────────────────────────────────────── 투표 패널 (3종 변형)
function VotePanel({ vote, onVote, variant, C }) {
  const total = vote.yes + vote.no;
  const yp = total ? Math.round((vote.yes / total) * 100) : 50;
  const np = 100 - yp;
  const my = vote.my; // null | 'yes' | 'no'

  // ── 변형 1: 듀얼 버튼
  if (variant === "buttons") {
    const Btn = ({ side, label, p, color, soft }) => {
      const on = my === side;
      return (
        <button
          onClick={() => onVote(side)}
          style={{
            flex: 1, position: "relative", overflow: "hidden", cursor: "pointer",
            padding: "10px 12px", borderRadius: 9, font: "inherit",
            border: `1.5px solid ${on ? color : C.hair2}`,
            background: on ? color : C.bg,
            color: on ? "#fff" : C.ink,
            transition: "all .15s ease",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 1,
          }}
        >
          <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".03em" }}>{label}</span>
          <span style={{ fontSize: 18, fontWeight: 800, fontVariantNumeric: "tabular-nums" }}>{p}%</span>
        </button>
      );
    };
    return (
      <div style={{ display: "flex", gap: 8, width: 220 }}>
        <Btn side="yes" label="달성 YES" p={yp} color={C.yes} />
        <Btn side="no" label="불가 NO" p={np} color={C.no} />
      </div>
    );
  }

  // ── 변형 2: 분할 비율 바 (좌=YES, 우=NO 클릭)
  if (variant === "split") {
    return (
      <div style={{ width: 220, display: "flex", flexDirection: "column", gap: 5 }}>
        <div style={{ display: "flex", height: 36, borderRadius: 9, overflow: "hidden", border: `1px solid ${C.hair2}` }}>
          <button
            onClick={() => onVote("yes")}
            style={{
              width: `${yp}%`, minWidth: 44, cursor: "pointer", border: "none", font: "inherit",
              background: my === "yes" ? C.yes : C.yesSoft,
              color: my === "yes" ? "#fff" : C.yes,
              fontWeight: 800, fontSize: 13, transition: "all .2s ease",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 4,
              fontVariantNumeric: "tabular-nums",
            }}
          >
            <span style={{ fontSize: 10, fontWeight: 700 }}>YES</span>{yp}%
          </button>
          <button
            onClick={() => onVote("no")}
            style={{
              width: `${np}%`, minWidth: 44, cursor: "pointer", border: "none", font: "inherit",
              background: my === "no" ? C.no : C.noSoft,
              color: my === "no" ? "#fff" : C.no,
              fontWeight: 800, fontSize: 13, transition: "all .2s ease",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 4,
              fontVariantNumeric: "tabular-nums",
            }}
          >
            <span style={{ fontSize: 10, fontWeight: 700 }}>NO</span>{np}%
          </button>
        </div>
        {(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') && (
          <div style={{ fontSize: 10.5, color: C.ink3, fontWeight: 500, textAlign: "center" }}>{won(total)}명 참여</div>
        )}
      </div>
    );
  }

  // ── 변형 3: 세그먼트 토글 + 배경 비율
  return (
    <div style={{ width: 220, display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ position: "relative", display: "flex", borderRadius: 999, border: `1px solid ${C.hair2}`, padding: 3, background: C.chipBg }}>
        {["yes", "no"].map((side) => {
          const on = my === side;
          const color = side === "yes" ? C.yes : C.no;
          return (
            <button key={side} onClick={() => onVote(side)} style={{
              flex: 1, cursor: "pointer", border: "none", font: "inherit", borderRadius: 999,
              padding: "7px 0", background: on ? color : "transparent",
              color: on ? "#fff" : C.ink2, fontWeight: 700, fontSize: 12.5,
              transition: "all .15s ease", letterSpacing: ".02em",
            }}>
              {side === "yes" ? "달성" : "불가"}
            </button>
          );
        })}
      </div>
      <div style={{ position: "relative", height: 6, borderRadius: 999, background: C.noSoft, overflow: "hidden" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${yp}%`, background: C.yes, transition: "width .25s ease" }} />
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>
        <span style={{ color: C.yes }}>YES {yp}%</span>
        <span style={{ color: C.no }}>NO {np}%</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────── 증권사 행
function AnalystRow({ a, cur, maxTgt, vote, onVote, gaugeVariant, voteVariant, C, unit="원" }) {
  const up = upside(cur, a.target);
  const buy = a.opinion === "매수";
  return (
    <div className="analyst-row-grid" style={{
      display: "grid", gridTemplateColumns: "190px 1fr 220px", gap: 28, alignItems: "center",
      padding: "22px 4px", borderTop: `1px solid ${C.hair}`,
    }}>
      {/* 증권사 정보 */}
      <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 15.5, fontWeight: 700, color: C.ink }}>{a.firm}</span>
          <span style={{
            fontSize: 10.5, fontWeight: 700, padding: "2px 7px", borderRadius: 5,
            background: buy ? C.yesSoft : C.chipBg, color: buy ? C.yes : C.ink2,
          }}>{a.opinion}</span>
        </div>
        <div style={{ fontSize: 12, color: C.ink3, fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>{a.date} 리포트</div>
        {a.reason && (
          <div className="analyst-row-reason" style={{
            fontSize: 11, color: C.ink2, marginTop: 5, lineHeight: 1.5,
            maxWidth: 180, fontWeight: 500, whiteSpace: "normal",
            wordBreak: "keep-all"
          }}>
            💬 {a.reason}
          </div>
        )}
      </div>

      {/* 목표가 + 게이지 */}
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{ fontSize: 20, fontWeight: 800, color: C.ink, fontVariantNumeric: "tabular-nums" }}>{won(a.target)}{unit}</span>
          <span style={{
            fontSize: 13, fontWeight: 800, padding: "2px 8px", borderRadius: 6,
            background: up >= 0 ? C.yes : C.no, color: "#fff", fontVariantNumeric: "tabular-nums",
          }}>{pct(up)}</span>
        </div>
        <GaugeBar cur={cur} tgt={a.target} maxTgt={maxTgt} variant={gaugeVariant} C={C} />
      </div>

      {/* 투표 */}
      <div className="analyst-row-vote-container" style={{ display: "flex", justifyContent: "flex-end" }}>
        <VotePanel vote={vote} onVote={onVote} variant={voteVariant} C={C} />
      </div>
    </div>
  );
}

window.VotePanel = VotePanel;
window.AnalystRow = AnalystRow;