// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Header Bar
// Logo | Filename | Dimensions | Undo | Redo | History | Close
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState } from 'react';
import type { UILocale } from '@/types';
import { useCanvasStore, useHistoryStore } from '@/store';
import { useCanvas } from '@/hooks/useCanvas';
import { HistoryPanel } from './HistoryPanel';

interface HeaderBarProps {
  fileName: string;
  locale: UILocale;
  onClose: () => void;
}

export const HeaderBar: React.FC<HeaderBarProps> = ({ fileName, onClose }) => {
  const [showHistory, setShowHistory] = useState(false);
  const { imageWidth, imageHeight } = useCanvasStore();
  const { canUndo, canRedo } = useHistoryStore();
  const { performUndo, performRedo } = useCanvas();

  const shortName = fileName.length > 30 ? `…${fileName.slice(-27)}` : fileName;

  return (
    <div className="ultra-header-bar" role="banner">
      {/* Logo */}
      <div className="ultra-logo">
        <img
          src="/logo.png"
          alt="Ultra Image Cropper 2.0"
          className="ultra-logo-img"
        />
      </div>

      {/* File info */}
      <div className="ultra-header-file-info">
        <span className="ultra-filename" title={fileName}>{shortName}</span>
        {imageWidth > 0 && (
          <span className="ultra-dimensions">{imageWidth} × {imageHeight}px</span>
        )}
      </div>

      {/* Actions */}
      <div className="ultra-header-actions">
        {/* Undo */}
        <button
          className="ultra-icon-btn"
          onClick={performUndo}
          disabled={!canUndo}
          aria-label="Undo (Ctrl+Z)"
          title="Undo (Ctrl+Z)"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <polyline points="9 14 4 9 9 4" />
            <path d="M20 20v-7a4 4 0 0 0-4-4H4" />
          </svg>
        </button>

        {/* Redo */}
        <button
          className="ultra-icon-btn"
          onClick={performRedo}
          disabled={!canRedo}
          aria-label="Redo (Ctrl+Y)"
          title="Redo (Ctrl+Y)"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <polyline points="15 14 20 9 15 4" />
            <path d="M4 20v-7a4 4 0 0 1 4-4h12" />
          </svg>
        </button>

        {/* History */}
        <button
          className={`ultra-icon-btn ${showHistory ? 'ultra-icon-btn--active' : ''}`}
          onClick={() => setShowHistory(!showHistory)}
          aria-label="History panel"
          title="History"
          aria-expanded={showHistory}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <polyline points="12 8 12 12 14 14" />
            <path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" />
          </svg>
        </button>

        <div className="ultra-header-divider" role="separator" />

        {/* Close */}
        <button
          className="ultra-close-btn"
          onClick={onClose}
          aria-label="Close editor (Escape)"
          title="Close (Esc)"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      </div>

      {/* History Panel (slide-out) */}
      {showHistory && <HistoryPanel onClose={() => setShowHistory(false)} />}
    </div>
  );
};