import React from 'react';
import './Toolbar.css';

function Toolbar({
  toolMode,
  onToolChange,
  borderStyle,
  onBorderStyleChange,
  previewMode = false,
  onTogglePreview,
  onConfigureAPI,
  onSave,
  onLoad,
  reportName,
  onReportNameChange,
  isSaving = false
}) {
  return (
    <div className="toolbar">
      <div className="toolbar-group">
        <button
          className={`toolbar-button ${toolMode === 'select' ? 'active' : ''}`}
          onClick={() => onToolChange('select')}
          title="Select Tool"
        >
          ↖️ Select
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addText' ? 'active' : ''}`}
          onClick={() => onToolChange('addText')}
          title="Add Text Field"
        >
          T Add Text
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addDBText' ? 'active' : ''}`}
          onClick={() => onToolChange('addDBText')}
          title="Add Database Text Field"
        >
          DB DB Text
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addExpr' ? 'active' : ''}`}
          onClick={() => onToolChange('addExpr')}
          title="Add Expression Field"
        >
          fx
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addFrame' ? 'active' : ''}`}
          onClick={() => onToolChange('addFrame')}
          title="Add Frame"
        >
          ▭ Add Frame
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addHLine' ? 'active' : ''}`}
          onClick={() => onToolChange('addHLine')}
          title="Add Horizontal Line"
        >
          ─ H-Line
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addVLine' ? 'active' : ''}`}
          onClick={() => onToolChange('addVLine')}
          title="Add Vertical Line"
        >
          │ V-Line
        </button>
        <button
          className={`toolbar-button ${toolMode === 'drawTable' ? 'active' : ''}`}
          onClick={() => onToolChange('drawTable')}
          title="Draw Table (D)"
        >
          ⊞ Draw
        </button>
        <button
          className={`toolbar-button ${toolMode === 'addBand' ? 'active' : ''}`}
          onClick={() => onToolChange('addBand')}
          title="Add Band (B)"
        >
          ▦ Band
        </button>
      </div>
      <div className="toolbar-separator"></div>
      <div className="toolbar-group">
        <label className="toolbar-label">Line Style:</label>
        <button
          className={`toolbar-button ${borderStyle === 'single' ? 'active' : ''}`}
          onClick={() => onBorderStyleChange('single')}
          title="Single Line"
        >
          ─ Single
        </button>
        <button
          className={`toolbar-button ${borderStyle === 'double' ? 'active' : ''}`}
          onClick={() => onBorderStyleChange('double')}
          title="Double Line"
        >
          ═ Double
        </button>
      </div>
      <div className="toolbar-separator"></div>
      <div className="toolbar-group">
        <button
          className={`toolbar-button ${previewMode ? 'active' : ''}`}
          onClick={onTogglePreview}
          title="Toggle Preview Mode"
        >
          {previewMode ? '👁️ Design Mode' : '📝 Preview Mode'}
        </button>
        {onConfigureAPI && (
          <button
            className="toolbar-button"
            onClick={onConfigureAPI}
            title="Configure API Endpoint"
          >
            ⚙️ Configure
          </button>
        )}
      </div>
      <div className="toolbar-separator"></div>
      <div className="toolbar-group toolbar-group--file">
        <input
          type="text"
          className="toolbar-report-name"
          value={reportName || ''}
          onChange={e => onReportNameChange && onReportNameChange(e.target.value)}
          placeholder="Report name"
          title="Report name"
        />
        <button
          className="toolbar-button"
          onClick={onSave}
          disabled={isSaving}
          title="Save Report"
        >
          {isSaving ? '...' : '💾 Save'}
        </button>
        <button
          className="toolbar-button"
          onClick={onLoad}
          title="Load Report"
        >
          📂 Load
        </button>
      </div>
    </div>
  );
}

export default Toolbar;