import React from 'react';
import { useStudioStore, Mode } from '../store/useStudioStore';
import './Toolbar.css';

const MODES: { id: Mode; label: string; icon: string }[] = [
  { id: 'model', label: 'MODEL', icon: '◈' },
  { id: 'render', label: 'RENDER', icon: '◎' },
  { id: 'animate', label: 'ANIMATE', icon: '▷' },
];

const Toolbar: React.FC = () => {
  const { mode, setMode, objects, selectedId, isRecording, setIsRecording } = useStudioStore();

  return (
    <div className="toolbar">
      <div className="toolbar-brand">
        <span className="brand-icon">⬡</span>
        <span className="brand-name">STUDIO3D</span>
        <span className="brand-sub">· HF SPACE</span>
      </div>

      <div className="mode-switcher">
        {MODES.map((m) => (
          <button
            key={m.id}
            className={`mode-btn ${mode === m.id ? 'mode-btn--active' : ''}`}
            onClick={() => setMode(m.id)}
          >
            <span className="mode-icon">{m.icon}</span>
            <span>{m.label}</span>
          </button>
        ))}
      </div>

      <div className="toolbar-actions">
        <div className="scene-info">
          <span className="info-badge">{objects.length} objects</span>
          {selectedId && <span className="info-badge selected">1 selected</span>}
        </div>
        <button
          className={`record-btn ${isRecording ? 'recording' : ''}`}
          onClick={() => setIsRecording(!isRecording)}
          title="Record animation to video"
        >
          {isRecording ? '⏹ STOP REC' : '⏺ RECORD'}
        </button>
      </div>
    </div>
  );
};

export default Toolbar;