'use client';

interface ChartControlsProps {
  mainIndicator: string;
  setMainIndicator: (val: string) => void;
  subIndicator1: string;
  setSubIndicator1: (val: string) => void;
  subIndicator2: string;
  setSubIndicator2: (val: string) => void;
  period: 'day' | 'week' | 'month';
  setPeriod: (val: 'day' | 'week' | 'month') => void;
}

export default function ChartControls({
  mainIndicator, setMainIndicator,
  subIndicator1, setSubIndicator1,
  subIndicator2, setSubIndicator2,
  period, setPeriod
}: ChartControlsProps) {
  const mainOptions = ['MA', 'BOLL', 'ENE', 'HIDE'];
  const subOptions = ['VOL', 'MACD', 'KDJ', 'RSI', 'WR', 'CCI', 'HIDE'];
  const periods = [
    { label: '日K', value: 'day' },
    { label: '周K', value: 'week' },
    { label: '月K', value: 'month' },
  ];

  return (
    <div className="flex items-center gap-2 px-4 py-2 bg-[#191B28] border-b border-[#2A2D3C] text-xs select-none overflow-x-auto whitespace-nowrap scrollbar-hide">
      {/* 周期选择 */}
      <div className="flex items-center gap-1 bg-[#2A2D3C] rounded p-0.5 shrink-0">
        {periods.map(p => (
          <button
            key={p.value}
            onClick={() => setPeriod(p.value as any)}
            className={`px-3 py-0.5 rounded transition-colors ${
              period === p.value 
                ? 'bg-blue-600 text-white font-medium' 
                : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
            }`}
          >
            {p.label}
          </button>
        ))}
      </div>

      <div className="w-px h-3 bg-gray-700 mx-1 shrink-0"></div>

      <div className="flex items-center gap-1 shrink-0">
        <span className="text-gray-500 mr-1">主图</span>
        {mainOptions.map(opt => (
          <button
            key={opt}
            onClick={() => setMainIndicator(opt)}
            className={`px-2 py-0.5 rounded transition-colors ${
              mainIndicator === opt 
                ? 'bg-blue-600/80 text-white font-medium' 
                : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
            }`}
          >
            {opt === 'HIDE' ? '隐藏' : opt}
          </button>
        ))}
      </div>
      
      <div className="w-px h-3 bg-gray-700 mx-1 shrink-0"></div>
      
      <div className="flex items-center gap-2 shrink-0">
        <span className="text-gray-500">副图1</span>
        <div className="flex gap-1">
          {subOptions.map(opt => (
            <button
              key={opt}
              onClick={() => setSubIndicator1(opt)}
              className={`px-2 py-0.5 rounded transition-colors ${
                subIndicator1 === opt 
                  ? 'bg-purple-600/80 text-white font-medium' 
                  : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
              }`}
            >
              {opt === 'HIDE' ? '隐藏' : opt}
            </button>
          ))}
        </div>
      </div>

      <div className="w-px h-3 bg-gray-700 mx-1 shrink-0"></div>

      <div className="flex items-center gap-2 shrink-0">
        <span className="text-gray-500">副图2</span>
        <div className="flex gap-1">
          {subOptions.map(opt => (
            <button
              key={opt}
              onClick={() => setSubIndicator2(opt)}
              className={`px-2 py-0.5 rounded transition-colors ${
                subIndicator2 === opt 
                  ? 'bg-teal-600/80 text-white font-medium' 
                  : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
              }`}
            >
              {opt === 'HIDE' ? '隐藏' : opt}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}