/**
 * View Component: FloatingActionButton
 * Bottom-right floating action buttons: back to top, view toggle.
 *
 * Props:
 *   showBackToTop: boolean
 *   onBackToTop: () => void
 *   viewMode: 'grid' | 'list'
 *   onToggleView: () => void
 */

function ArrowUpIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="19" x2="12" y2="5"></line>
      <polyline points="5 12 12 5 19 12"></polyline>
    </svg>
  );
}

function GridIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="7" height="7"></rect>
      <rect x="14" y="3" width="7" height="7"></rect>
      <rect x="14" y="14" width="7" height="7"></rect>
      <rect x="3" y="14" width="7" height="7"></rect>
    </svg>
  );
}

function ListIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="8" y1="6" x2="21" y2="6"></line>
      <line x1="8" y1="12" x2="21" y2="12"></line>
      <line x1="8" y1="18" x2="21" y2="18"></line>
      <line x1="3" y1="6" x2="3.01" y2="6"></line>
      <line x1="3" y1="12" x2="3.01" y2="12"></line>
      <line x1="3" y1="18" x2="3.01" y2="18"></line>
    </svg>
  );
}

function FloatingActionButton({ showBackToTop, onBackToTop, viewMode, onToggleView }) {
  return (
    <div className="fab-container">
      <button
        className={`fab-btn ${showBackToTop ? 'visible' : ''}`}
        onClick={onBackToTop}
        aria-label="回到顶部"
        title="回到顶部"
      >
        <ArrowUpIcon />
      </button>
      <button
        className="fab-btn visible"
        onClick={onToggleView}
        aria-label="切换视图"
        title="切换视图"
      >
        {viewMode === 'grid' ? <ListIcon /> : <GridIcon />}
      </button>
    </div>
  );
}

window.FloatingActionButton = FloatingActionButton;