/**
 * Toolbar with justification buttons for editor and results panes.
 * Matches the macOS app: left / center / right for each pane.
 */

import '../styles/align-toolbar.css'

export type Alignment = 'left' | 'center' | 'right'

export interface AlignToolbarProps {
  editorAlign: Alignment
  resultsAlign: Alignment
  onEditorAlignChange: (align: Alignment) => void
  onResultsAlignChange: (align: Alignment) => void
}

function AlignIcon({ type }: { type: 'left' | 'center' | 'right' }) {
  if (type === 'left') {
    return (
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
        <rect x="1" y="2" width="12" height="1.5" rx="0.5" fill="currentColor" />
        <rect x="1" y="6" width="8" height="1.5" rx="0.5" fill="currentColor" />
        <rect x="1" y="10" width="10" height="1.5" rx="0.5" fill="currentColor" />
      </svg>
    )
  }
  if (type === 'center') {
    return (
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
        <rect x="1" y="2" width="12" height="1.5" rx="0.5" fill="currentColor" />
        <rect x="3" y="6" width="8" height="1.5" rx="0.5" fill="currentColor" />
        <rect x="2" y="10" width="10" height="1.5" rx="0.5" fill="currentColor" />
      </svg>
    )
  }
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <rect x="1" y="2" width="12" height="1.5" rx="0.5" fill="currentColor" />
      <rect x="5" y="6" width="8" height="1.5" rx="0.5" fill="currentColor" />
      <rect x="3" y="10" width="10" height="1.5" rx="0.5" fill="currentColor" />
    </svg>
  )
}

const alignments: Alignment[] = ['left', 'center', 'right']

export function AlignToolbar({
  editorAlign,
  resultsAlign,
  onEditorAlignChange,
  onResultsAlignChange,
}: AlignToolbarProps) {
  return (
    <div className="align-toolbar">
      <div className="align-group">
        <span className="align-label">Editor</span>
        {alignments.map((a) => (
          <button
            key={a}
            className={`align-btn${editorAlign === a ? ' active' : ''}`}
            onClick={() => onEditorAlignChange(a)}
            title={`Align editor ${a}`}
          >
            <AlignIcon type={a} />
          </button>
        ))}
      </div>

      <div className="align-group">
        <span className="align-label">Results</span>
        {alignments.map((a) => (
          <button
            key={a}
            className={`align-btn${resultsAlign === a ? ' active' : ''}`}
            onClick={() => onResultsAlignChange(a)}
            title={`Align results ${a}`}
          >
            <AlignIcon type={a} />
          </button>
        ))}
      </div>
    </div>
  )
}
