import { useState } from 'react';

export function BottomBar() {
  const [isOpen, setIsOpen] = useState(true);
  return (
    <div className="border-t border-stroke flex flex-col bg-bg-base flex-shrink-0">
      {/* 제목 바 — 항상 표시 */}
      <div className="flex items-center px-3 py-1 border-b border-stroke flex-shrink-0">
        <span className="text-caption font-bold text-fg-disabled font-korean">
          이벤트 로그 / 통신 기록 (EVENT LOG / COMMUNICATION TRANSCRIPT)
        </span>
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="flex-1 text-center text-caption text-fg-disabled hover:text-fg cursor-pointer transition-colors"
        >
          {isOpen ? '▼' : '▲'}
        </button>
        <div className="flex items-center gap-1.5">
          {['전체', '긴급', '통신'].map((label, i) => (
            <button
              key={i}
              className="px-2 py-px rounded-sm text-caption cursor-pointer font-korean border border-stroke text-fg-disabled hover:text-fg"
            >
              {label}
            </button>
          ))}
        </div>
      </div>
      {/* 이벤트 로그 내용 — 토글 */}
      {isOpen && (
        <div className="h-[120px] overflow-y-auto px-3 py-1 font-mono text-caption leading-[1.7] scrollbar-thin">
          {[
            { time: '10:35', msg: 'SOS FROM M/V SEA GUARDIAN', important: true },
            { time: '10:35', msg: 'OIL LEAK DETECTED SENSOR #3', important: false },
            { time: '10:40', msg: 'CG HELO DISPATCHED', important: true },
            { time: '10:41', msg: 'GM CRITICAL ALERT — DAMAGE STABILITY FAIL', important: true },
            { time: '10:42', msg: 'Coast Guard 123 en route — ETA 15 min', important: false },
            {
              time: '10:43',
              msg: 'LONGITUDINAL STRENGTH WARNING — BM 92% of LIMIT',
              important: false,
            },
            {
              time: '10:45',
              msg: 'BALLAST TRANSFER INITIATED — PORT #2 → STBD #3',
              important: false,
            },
            { time: '10:48', msg: 'LIST INCREASING — 12° → 15°', important: false },
            { time: '10:50', msg: 'RESCUE HELO ON SCENE — HOISTING OPS', important: false },
            { time: '10:55', msg: '5 SURVIVORS RECOVERED BY HELO', important: true },
          ].map((e, i) => (
            <div key={i}>
              <span className="text-fg-disabled">[{e.time}]</span>{' '}
              <span className={e.important ? 'text-color-accent' : 'text-fg'}>{e.msg}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
