import React from 'react';
import type { Timeframe } from '../types';
import TimezonePicker from './TimezonePicker';

interface BottomBarProps {
  timeframe:      Timeframe;
  logScale:       boolean;
  percentScale:   boolean;
  showGrid:       boolean;
  lastTime:       number;
  displayTimezone: string;
  onTimezoneChange: (tz: string) => void;
  onTimeframe:    (t: Timeframe) => void;
  onLogScale:     () => void;
  onPercentScale: () => void;
  onAutoScale:    () => void;
  onFitContent:   () => void;
  onToggleGrid:   () => void;
}

const PERIODS: { label: string; tf: Timeframe }[] = [
  { label: '1M', tf: '1M' },
  { label: '1W', tf: '1W' },
  { label: '1D', tf: '1D' },
  { label: '4h', tf: '4h' },
  { label: '1h', tf: '1h' },
  { label: '30m',tf: '30m' },
  { label: '15m',tf: '15m' },
  { label: '10m',tf: '10m' },
  { label: '5m', tf: '5m' },
  { label: '3m', tf: '3m' },
  { label: '1m', tf: '1m' },
];

const IcCalendar = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
    <rect x="1" y="3" width="12" height="10" rx="1"/>
    <line x1="1" y1="6" x2="13" y2="6"/>
    <line x1="4" y1="1" x2="4" y2="4"/>
    <line x1="10" y1="1" x2="10" y2="4"/>
  </svg>
);

const IcGrid = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
    <rect x="1" y="1" width="12" height="12" rx="1"/>
    <line x1="5" y1="1" x2="5" y2="13"/>
    <line x1="9" y1="1" x2="9" y2="13"/>
    <line x1="1" y1="5" x2="13" y2="5"/>
    <line x1="1" y1="9" x2="13" y2="9"/>
  </svg>
);

const BottomBar: React.FC<BottomBarProps> = ({
  timeframe, logScale, percentScale, showGrid, lastTime,
  displayTimezone, onTimezoneChange,
  onTimeframe, onLogScale, onPercentScale, onAutoScale, onFitContent, onToggleGrid,
}) => {
  return (
    <div className="tv-bottom-bar">
      <div className="tv-period-group">
        {PERIODS.map(p => (
          <button
            key={p.label}
            className={`tv-period-btn ${timeframe === p.tf ? 'active' : ''}`}
            onClick={() => onTimeframe(p.tf)}
          >{p.label}</button>
        ))}
      </div>

      <button className="tv-period-btn" title="화면 맞춤 (F)" onClick={onFitContent}>
        <IcCalendar />
      </button>

      <div className="tv-bottom-spacer" />

      <TimezonePicker
        variant="bar"
        value={displayTimezone}
        displayUnix={lastTime}
        onChange={onTimezoneChange}
      />

      <div className="tv-period-group tv-right-toggles">
        <button
          className={`tv-period-btn tv-toggle-btn ${showGrid ? 'active' : ''}`}
          title={showGrid ? '그리드 숨기기' : '그리드 표시'}
          onClick={onToggleGrid}
        ><IcGrid /></button>
        <button
          className={`tv-period-btn tv-toggle-btn ${percentScale ? 'active' : ''}`}
          title="퍼센트(%) 스케일"
          onClick={onPercentScale}
        >%</button>
        <button
          className={`tv-period-btn tv-toggle-btn ${logScale ? 'active' : ''}`}
          onClick={onLogScale}
          title="로그 스케일 (L)"
        >log</button>
        <button
          className="tv-period-btn tv-toggle-btn"
          title="가격 스케일 자동 맞춤"
          onClick={onAutoScale}
        >auto</button>
      </div>
    </div>
  );
};

export default BottomBar;