interface TableSelectionBarProps {
  count: number
  onClear: () => void
  onExport?: (format: 'csv' | 'xlsx') => void
}

export default function TableSelectionBar({ count, onClear, onExport }: TableSelectionBarProps) {
  if (count === 0) return null

  return (
    <div
      style={{
        position: 'sticky',
        bottom: 20,
        zIndex: 50,
        margin: '0 auto',
        width: 'fit-content',
        maxWidth: '92%',
        background: '#0f172a',
        color: '#f8fafc',
        padding: '8px 18px',
        borderRadius: 9999,
        boxShadow: '0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0,0,0,0.2)',
        display: 'flex',
        alignItems: 'center',
        gap: 14,
        fontSize: 13,
        animation: 'fadeIn 0.2s ease',
        border: '1px solid #334155',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 700, color: '#38bdf8' }}>
        <span style={{ fontSize: 14 }}>✓</span>
        <span>{count} selected</span>
      </div>

      {onExport && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <button
            type="button"
            onClick={() => onExport('csv')}
            style={{
              background: '#16a34a',
              color: 'white',
              border: 'none',
              borderRadius: 20,
              padding: '5px 12px',
              fontSize: 12,
              fontWeight: 600,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 5,
              transition: 'background 0.15s ease',
            }}
            onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = '#15803d' }}
            onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = '#16a34a' }}
          >
            <span>📤</span> Export CSV
          </button>
          <button
            type="button"
            onClick={() => onExport('xlsx')}
            style={{
              background: '#0284c7',
              color: 'white',
              border: 'none',
              borderRadius: 20,
              padding: '5px 12px',
              fontSize: 12,
              fontWeight: 600,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 5,
              transition: 'background 0.15s ease',
            }}
            onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.background = '#0369a1' }}
            onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.background = '#0284c7' }}
          >
            <span>📊</span> Export Excel
          </button>
        </div>
      )}

      <button
        type="button"
        onClick={onClear}
        style={{
          background: 'transparent',
          color: '#94a3b8',
          border: 'none',
          fontSize: 12,
          fontWeight: 600,
          cursor: 'pointer',
          padding: '4px 6px',
          transition: 'color 0.15s ease',
        }}
        onMouseEnter={e => { (e.currentTarget as HTMLButtonElement).style.color = '#f1f5f9' }}
        onMouseLeave={e => { (e.currentTarget as HTMLButtonElement).style.color = '#94a3b8' }}
      >
        Clear
      </button>
    </div>
  )
}