/**
 * ChartHoverToolbar
 * 차트 영역에 마우스 오버 시 하단 중앙에 표시되는 플로팅 툴바.
 * - 마우스가 차트 영역을 벗어나면 사라진다.
 * - 버튼: 줌아웃(−), 줌인(+), 전체보기(⌐┘), 왼쪽(‹), 오른쪽(›)
 */
import React from 'react';

interface ChartHoverToolbarProps {
  onZoomOut:    () => void;
  onZoomIn:     () => void;
  onFit:        () => void;
  onScrollLeft:  () => void;
  onScrollRight: () => void;
  /** 멀티차트 모드에서 이 슬롯을 단일 전체화면으로 확장. 없으면 기본 fitContent() 사용 */
  onFullView?:  () => void;
}

const ChartHoverToolbar: React.FC<ChartHoverToolbarProps> = ({
  onZoomOut, onZoomIn, onFit, onScrollLeft, onScrollRight, onFullView,
}) => (
  <div className="chart-hover-toolbar" onMouseDown={e => e.stopPropagation()}>
    <button className="cht-btn" onClick={onZoomOut} title="축소 (−)">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
        <line x1="2" y1="7" x2="12" y2="7"/>
      </svg>
    </button>

    <button className="cht-btn" onClick={onZoomIn} title="확대 (+)">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
        <line x1="7" y1="2" x2="7" y2="12"/>
        <line x1="2" y1="7" x2="12" y2="7"/>
      </svg>
    </button>

    {/* 멀티차트: 단일 전체화면 전환 / 단일차트: 전체 데이터 핏 */}
    <button className="cht-btn" onClick={onFullView ?? onFit} title={onFullView ? '단일 차트로 전환' : '전체 보기'}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="5,1 1,1 1,5"/>
        <polyline points="9,13 13,13 13,9"/>
        <line x1="1" y1="1" x2="6" y2="6"/>
        <line x1="13" y1="13" x2="8" y2="8"/>
      </svg>
    </button>

    <button className="cht-btn" onClick={onScrollLeft} title="왼쪽으로 이동 (과거)">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="9,2 4,7 9,12"/>
      </svg>
    </button>

    <button className="cht-btn" onClick={onScrollRight} title="오른쪽으로 이동 (최근)">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="5,2 10,7 5,12"/>
      </svg>
    </button>
  </div>
);

export default ChartHoverToolbar;