import React from 'react';
import type { StatusBarProps } from '../types/ui.types';
import { formatCoordinate, type UnitType } from '../utils/format';

const StatusBar: React.FC<StatusBarProps> = ({
  snapEnabled, orthoEnabled, polarEnabled, gridEnabled,
  cursorX, cursorY, activeLayer, activeTool, onlineCount,
  onToggleSnap, onToggleOrtho, onTogglePolar, onToggleGrid, seatCount,
  unit = 'mm', scaleFactor = 1, onUnitChange,
}) => {
  const xDisplay = formatCoordinate(cursorX, unit, scaleFactor);
  const yDisplay = formatCoordinate(cursorY, unit, scaleFactor);

  return (
    <footer className="statusbar" role="status">
      <div className={`status-item${snapEnabled ? ' active' : ''}`} title="Snap-Modus (F3)" aria-pressed={snapEnabled} onClick={onToggleSnap}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
        <span>SNAP</span>
      </div>
      <div className={`status-item${orthoEnabled ? ' active' : ''}`} title="Ortho-Modus (F8)" aria-pressed={orthoEnabled} onClick={onToggleOrtho}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3l18 18M3 21l18-18"/></svg>
        <span>ORTHO</span>
      </div>
      <div className={`status-item hide-mobile${polarEnabled ? ' active' : ''}`} title="Polar-Tracking" aria-pressed={polarEnabled} onClick={onTogglePolar}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="16 12 12 8 8 12"/><line x1="12" y1="2" x2="12" y2="16"/></svg>
        <span>POLAR</span>
      </div>
      <div className={`status-item${gridEnabled ? ' active' : ''}`} title="Grid anzeigen (F7)" aria-pressed={gridEnabled} onClick={onToggleGrid}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
        <span>GRID</span>
      </div>
      <div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
        <span>X: {xDisplay} {unit}</span>
      </div>
      <div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
        <span>Y: {yDisplay} {unit}</span>
      </div>
      <div className="status-item hide-mobile" title="Layer">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/></svg>
        <span>{activeLayer}</span>
      </div>
      <div className="status-item hide-mobile" title="Werkzeug">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
        <span>{activeTool}</span>
      </div>
      {seatCount !== undefined && seatCount > 0 && (
        <div className="status-item hide-mobile" title="Stuhl-Anzahl" style={{ fontFamily: 'var(--font-mono)' }}>
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="3" width="12" height="18" rx="1"/><line x1="6" y1="7" x2="18" y2="7"/></svg>
          <span>{seatCount} Stühle</span>
        </div>
      )}
      {onUnitChange && (
        <div className="status-item" title="Maßeinheit">
          <select
            value={unit}
            onChange={(e) => onUnitChange(e.target.value as UnitType)}
            style={{
              background: 'transparent',
              color: 'inherit',
              border: '1px solid var(--color-border)',
              borderRadius: '3px',
              padding: '1px 4px',
              fontSize: '11px',
              cursor: 'pointer',
            }}
            aria-label="Maßeinheit auswählen"
          >
            <option value="mm">mm</option>
            <option value="cm">cm</option>
            <option value="m">m</option>
          </select>
        </div>
      )}
      <div className="status-item" title={`${onlineCount} anderer Nutzer online`}>
        <span className="status-dot"></span>
        <span>Online · {onlineCount} weiterer</span>
      </div>
    </footer>
  );
};

export default StatusBar;